/* Formulario de inscripción a medida (constructor). Los colores, la letra y las
   esquinas vienen de la identidad del congreso (variables en base.html). */

.fx {
    --r: 16px;
    --r-lg: 24px;
    --line: #DCE3EC;
    --muted: #4A5A70;
    --tint: color-mix(in srgb, var(--fp) 8%, #FFFFFF);
    --ring: color-mix(in srgb, var(--fp) 16%, transparent);
    margin: 0;
    background: var(--fbg);
    color: var(--ft);
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.fx--font-archivo { font-family: "Archivo", system-ui, sans-serif; }
.fx--font-serif { font-family: Georgia, "Times New Roman", serif; }
.fx--font-system { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx h1, .fx h2, .fx h3 { font-family: var(--fh, inherit); }
.fx--corners-square { --r: 4px; --r-lg: 6px; }
.fx--corners-round { --r: 22px; --r-lg: 32px; }

.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx a { color: var(--fp); }
.fx [hidden] { display: none !important; }

.fx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.fx-preview { background: repeating-linear-gradient(135deg, #FFF4DB 0 14px, #FDE9B8 14px 28px); color: #6B4A00; font-size: 13px; font-weight: 700; text-align: center; padding: 6px 12px; }
.fx-preview--staff { background: #1F2A44; color: #FFFFFF; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 9px 12px; }
.fx-preview--staff a { color: #FFFFFF; text-decoration: underline; font-weight: 600; }
.fx-staff { border: 1px dashed #9AA3B5; border-radius: 10px; padding: 14px 16px; background: #F6F7FA; }
.fx-staff .fx-check { padding: 8px 4px; background: transparent; }
.fx-staff .fx-check__notice { margin-top: 2px; }

/* Cabecera con la imagen del congreso */
.fx-hero {
    background: var(--fp);
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    min-height: 300px;
    padding: 20px 0 130px;
}
.fx-hero--image { min-height: 360px; }
/* Opciones de la imagen de cabecera (altura, ancho, encuadre) */
.fx-hero--image.fx-hero--h-short { min-height: 240px; }
.fx-hero--image.fx-hero--h-tall { min-height: 480px; }
.fx-hero--image.fx-hero--w-form, .fx-hero--image.fx-hero--h-natural { min-height: 0; padding-bottom: 120px; }
.fx-hero__frame { margin-top: 18px; }
.fx-hero__frame.fx-wrap .fx-hero__pic, .fx-hero__frame.fx-wrap .fx-hero__img { border-radius: var(--r-lg); }
.fx-hero__pic { background-size: cover; background-repeat: no-repeat; height: 220px; }
.fx-hero--h-short .fx-hero__pic { height: 140px; }
.fx-hero--h-tall .fx-hero__pic { height: 320px; }
.fx-hero__img { display: block; width: 100%; height: auto; }
.fx-hero__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fx-hero__brand { flex: 1 1 200px; }
.fx-hero__name { font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.fx-hero__logo { max-height: 56px; max-width: 240px; display: block; }
/* «Mi inscripción» e idioma: en la tarjeta del título, con los colores del congreso.
   En las pantallas sin tarjeta van en la cabecera, sobre fondo blanco para que se
   lean encima de cualquier imagen. */
.fx-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-tools__link {
    color: var(--fp) !important;
    background: #FFFFFF;
    border: 1.5px solid var(--fp);
    border-radius: var(--r, 10px);
    padding: 9px 16px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.fx-tools__link:hover { background: var(--fp); color: #FFFFFF !important; }
.fx-flags { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #EEF2F7; border: 1px solid #DCE3EC; }
.fx-flag { display: inline-flex; padding: 6px; border-radius: 10px; opacity: .55; }
.fx-flag:hover { opacity: .9; }
.fx-flag.is-active { background: #FFFFFF; opacity: 1; box-shadow: 0 0 0 2px var(--fp); }
.fx-flag:focus-visible { outline: 2px solid var(--fp); outline-offset: 2px; }
.fx-hero .fx-tools__link { border-color: #FFFFFF; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.fx-hero .fx-flags { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.fx-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.fx-head__text { flex: 1 1 320px; min-width: 0; }
.fx-head__top .fx-tools { flex: 0 0 auto; }
.fx-head__top--end { justify-content: flex-end; margin-bottom: 8px; }

.fx-main { margin-top: -100px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 20px; }

.fx-card {
    background: #FFFFFF;
    border-radius: var(--r-lg);
    padding: 26px 28px;
    box-shadow: 0 30px 60px -36px rgba(18, 35, 58, .35);
}

.fx-head__title { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.fx-head__subtitle { margin: 8px 0 0; color: var(--muted); }
.fx-progress { margin-top: 22px; height: 8px; border-radius: 99px; background: #E3E9F1; overflow: hidden; }
.fx-progress span { display: block; height: 100%; border-radius: 99px; background: var(--fp); transition: width .3s ease; }
.fx-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.fx-step { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.fx-step a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.fx-step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 12px; font-weight: 800; background: #E3E9F1; color: var(--muted);
}
.fx-step.is-current { color: var(--fp); }
.fx-step.is-current .fx-step__n { background: var(--fp); color: #FFFFFF; }
.fx-step.is-done { color: #1F7A4D; }
.fx-step.is-done .fx-step__n { background: #DDF3E6; color: #1F7A4D; }

.fx-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.fx-form { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.fx-summary { flex: 1 1 280px; max-width: 360px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.fx-summary__title { margin: 0; font-size: 18px; font-weight: 800; }
.fx-summary__name { margin: 0; font-weight: 700; }
.fx-summary__lines { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 12px; }
.fx-summary__note { margin: 0; }
.fx-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.fx-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 12px; font-weight: 700; }
.fx-total strong { font-size: 28px; font-weight: 800; }

.fx-intro { margin: 0; color: var(--muted); }
.fx-page-image { width: 100%; border-radius: var(--r); display: block; }
.fx-section { display: flex; flex-direction: column; gap: 14px; }
.fx-section__title { margin: 0; font-size: 12px; font-weight: 800; color: var(--fp); text-transform: uppercase; letter-spacing: .08em; }
.fx-section__title--small { margin-top: 4px; }
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx-block { grid-column: 1 / -1; min-width: 0; }
.fx-block--half { grid-column: span 1; }
.fx-block__title { margin: 0 0 8px; font-size: 17px; font-weight: 800; }

.fx-field { display: flex; flex-direction: column; gap: 6px; }
.fx-label, .fx-legend { font-size: 14px; font-weight: 700; color: var(--ft); padding: 0; }
.fx-label em, .fx-legend em { font-style: normal; color: #B42318; }
.fx-legend { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.fx input[type="text"], .fx input[type="email"], .fx input[type="number"], .fx input[type="date"], .fx textarea, .fx select {
    width: 100%;
    min-height: 50px;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--r);
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--ft);
    background: #FFFFFF;
    transition: border-color .15s, box-shadow .15s;
}
.fx input:focus, .fx textarea:focus, .fx select:focus { outline: none; border-color: var(--fp); box-shadow: 0 0 0 4px var(--ring); }
.has-error input, .has-error textarea { border-color: #B42318; }
.fx-help { margin: 0; font-size: 13px; color: var(--muted); }
.fx-error { margin: 0; font-size: 13px; color: #B42318; font-weight: 600; }
.fx-alert, .fx-message { padding: 12px 16px; border-radius: var(--r); background: #FDECEC; color: #8A1C14; font-weight: 600; }
.fx-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-message--success { background: #E6F6EC; color: #1F5F3A; }
.fx-message--warning { background: #FFF4DB; color: #6B4A00; }

/* Opciones en tarjetas */
.fx-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.fx-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fx-options--payment, .fx-options--extras { grid-template-columns: 1fr; }
.fx-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.fx-option:hover { border-color: color-mix(in srgb, var(--fp) 45%, var(--line)); }
.fx-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fp); flex: 0 0 20px; }
.fx-option.is-on { border-color: var(--fp); background: var(--tint); box-shadow: 0 0 0 4px var(--ring); }
.fx-option.is-unavailable { opacity: .45; }
.fx-option__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fx-option__title { font-weight: 800; }
.fx-option__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 18px; text-align: right; }
.fx-options--modality .fx-option__price { align-items: flex-start; font-size: 22px; }
/* Modalidad «en grupos»: cada modalidad con sus tarifas. */
.fx-group { margin-top: 14px; padding: 16px; border: 1px solid #E8EDF3; border-radius: var(--r); background: #FBFCFE; }
.fx-group__title { margin: 0; font-size: 17px; font-weight: 800; }
.fx-group__desc { margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.fx-group__dates { white-space: nowrap; font-weight: 600; }
.fx-options--grouped { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fx-options--grouped .fx-option__price { align-items: flex-start; font-size: 20px; margin-top: 4px; }
.fx-option__hint { font-size: 13px; color: var(--muted); font-weight: 500; }
.fx-option--row { align-items: center; }
.fx-options--payment .fx-option { align-items: center; }
.fx-options--payment .fx-option__body { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.fx-line strong, .fx-option__price, .fx-total strong { white-space: nowrap; }
/* Formas de pago: icono, nombre y, en tarjeta, las marcas que admite el TPV. */
.fx-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.fx-pay__icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--fp); }
.fx-brands { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fx-brand { width: 44px; height: 28px; display: block; }
.fx-option__hint:empty { display: none; }
.fx-option__hint--warn { color: #A5121A; font-weight: 700; }

.fx-matrix { border: 1px solid #E8EDF3; border-radius: var(--r); padding: 4px 16px; }
.fx-matrix summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 14px; }
.fx-table-wrap { overflow-x: auto; padding-bottom: 8px; }
.fx-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.fx-table th, .fx-table td { padding: 10px 12px; text-align: right; font-size: 14px; border-bottom: 1px solid #E8EDF3; }
.fx-table th:first-child, .fx-table td:first-child { text-align: left; }
.fx-table th { font-size: 12px; color: var(--muted); }
.fx-table td.is-selected { background: var(--fp); color: #FFFFFF; font-weight: 800; border-radius: 8px; }

.fx-text { color: var(--ft); }
.fx-text p { margin: 0 0 8px; }
.fx-notice { padding: 14px 16px; border-radius: var(--r); background: var(--tint); font-size: 14px; }
.fx-image { width: 100%; border-radius: var(--r); display: block; }
.fx-divider { border: 0; border-top: 1px solid #E8EDF3; margin: 4px 0; }

/* Más participantes */
.fx-people { display: flex; flex-direction: column; gap: 12px; }
.fx-person { border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; }
.fx-person__head { display: flex; justify-content: space-between; align-items: center; }
.fx-link { background: none; border: 0; padding: 0; color: var(--fp); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; }
.fx-people__add { align-self: flex-start; min-height: 44px; }

/* Facturación */
.fx-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #E8EDF3; border-radius: var(--r); margin: 0 0 12px; }
.fx-ask__q { float: left; flex: 1 1 240px; padding: 0; font-weight: 700; }
.fx-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: #EEF2F7; gap: 4px; }
.fx-seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.fx-seg label.is-on { background: #FFFFFF; color: var(--fp); box-shadow: 0 2px 6px rgba(18, 35, 58, .12); }
.fx-seg input { accent-color: var(--fp); margin: 0; }
.fx-sub { border-left: 3px solid var(--fp); padding: 4px 0 4px 18px; margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }

.fx-check { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: #F3F6FA; font-size: 14px; cursor: pointer; }
.fx-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fp); flex: 0 0 20px; }
.fx-check__notice { display: block; margin-top: 6px; }
.fx-check--soft { font-weight: 700; }

.fx-review { display: flex; flex-direction: column; gap: 10px; }
.fx-review__item { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid #E8EDF3; border-radius: var(--r); }
.fx-review__item p { margin: 2px 0 0; }
.fx-review__item a { font-weight: 700; font-size: 14px; }

.fx-actions { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #E8EDF3; padding-top: 20px; }
.fx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 24px; border-radius: var(--r);
    font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none;
}
.fx-btn--primary { background: var(--fp); color: #FFFFFF !important; border: 0; }
.fx-btn--primary:hover { filter: brightness(1.08); }
.fx-btn--ghost { background: #FFFFFF; color: var(--ft); border: 1.5px solid #CBD5E1; }

/* Página final */
.fx-done { text-align: center; }
.fx-done__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: #DDF3E6; color: #1F7A4D; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.fx-bank { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.fx-bank div { display: flex; flex-direction: column; }
.fx-bank dt { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fx-bank dd { margin: 0; font-weight: 700; word-break: break-all; }
.fx .payment-options h2 { font-size: 12px; font-weight: 800; color: var(--fp); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; }
.fx .payment-options .wizard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fx .button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r); font-weight: 800; text-decoration: none; border: 1.5px solid var(--fp); }
.fx .button--primary { background: var(--fp); color: #FFFFFF; }
.fx .button--secondary { background: #FFFFFF; color: var(--fp); }

.fx-footer { color: var(--muted); font-size: 13px; padding-bottom: 14px; text-align: center; }
.fx-footer__by { display: block; margin-top: 4px; font-size: 12px; }

/* Página de pago y su resultado con el aspecto del formulario. */
.fx-btn--wide { width: 100%; justify-content: center; }
.fx-pay__amount { font-size: 22px; color: var(--fp); }
.fx-pay-method { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1.5px solid #DCE3EC; border-radius: var(--r-lg); background: #FBFCFE; }
.fx-pay-method__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.fx-pay-method__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--ft); }
.fx-pay-method .fx-text { margin: 0; }
.fx-pay-method form { margin: 0; }
.fx-pay-options { display: flex; flex-direction: column; gap: 12px; }
.fx-pay-options__party { margin: 6px 0 0; font-size: 14px; }
.fx-pay-options__buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fx-pay-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1.5px solid #DCE3EC; border-radius: var(--r-lg); background: #FFFFFF; color: var(--ft) !important; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fx-pay-choice:hover { border-color: var(--fp); box-shadow: 0 8px 20px -14px rgba(18, 35, 58, .45); }
.fx-pay-choice__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 18px; white-space: nowrap; }
.fx-pay-choice__price small { font-size: 11px; font-weight: 600; color: var(--muted); white-space: normal; text-align: right; }
.fx-done__icon--error { background: #FDECEC; color: #A5121A; }
.fx-done__icon--wait { background: #EEF2F7; color: var(--fp); }
.checkout-challenge .fx-btn { align-self: center; }

@media (max-width: 720px) {
    .fx-card { padding: 20px 18px; }
    .fx-grid { grid-template-columns: 1fr; }
    .fx-block--half { grid-column: 1 / -1; }
    .fx-hero { padding-bottom: 110px; min-height: 220px; }
    .fx-summary { position: static; max-width: none; }
    .fx-bank { grid-template-columns: 1fr; }
    .fx-actions .fx-btn { flex: 1; }
    .fx-hero__name { font-size: 16px; }
}

/* Pago y resultado del pago con el aspecto del formulario: reutilizan el marcado
   de payments/checkout.html y result.html, con las variables de la web
   apuntando a los colores del formulario. */
.fx {
    --color-primary: var(--fp);
    --color-text: var(--ft);
    --color-text-muted: #4A5A70;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F3F6FA;
    --color-border: #DCE3EC;
    --color-coral: #B42318;
    --radius-lg: var(--r-lg);
    --radius-md: var(--r);
    --radius-sm: 10px;
    --transition: 180ms ease;
    --color-primary-light: var(--fp);
    --color-magenta: var(--fa);
    --max-width: 1120px;
}
.fx .section { padding: 0; }
.fx .container { max-width: none; padding: 0; }
.fx .registration-card { background: #FFFFFF; border-radius: var(--r-lg); padding: 26px 28px; box-shadow: 0 30px 60px -36px rgba(18, 35, 58, .35); }
.fx .section__title { margin: 0 0 16px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: var(--ft); }
.fx .section__text { margin: 0 0 12px; }
.fx .help-text { margin: 4px 0 0; font-size: 13px; color: #4A5A70; }

/* Página de pago propia (tarjeta con Redsys InSite y botones de PayPal). */
.checkout__summary {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.checkout__summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.checkout__summary dt {
    color: var(--color-text-muted);
}

.checkout__summary dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.checkout__methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.checkout__method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition);
}

.checkout__method span {
    font-weight: 400;
    color: var(--color-text-muted);
}

.checkout__method.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* El recuadro de Redsys ocupa el alto que se le da: en móvil los campos van en dos filas. */
.checkout__card {
    height: 160px;
    margin: 1rem 0;
}

@media (max-width: 600px) {
    .checkout__card {
        height: 230px;
    }
}

.checkout__paypal {
    max-width: 420px;
    margin: 1rem 0;
}

.checkout__status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.checkout__status.is-error {
    color: var(--color-coral);
}

.checkout__status .button {
    margin-top: 0.5rem;
}

.checkout__back {
    margin-top: 1.5rem;
    color: var(--color-text-muted);
}

.checkout__hidden-frame {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    visibility: hidden;
}

.button-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.95rem;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-challenge {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
}

.checkout-challenge[hidden] {
    display: none;
}

.checkout-challenge__box {
    display: grid;
    gap: 0.75rem;
    width: min(100%, 480px);
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

.checkout-challenge__title {
    margin: 0;
    font-weight: 600;
}

.checkout-challenge iframe {
    width: 100%;
    height: min(600px, 70vh);
    border: 0;
}

/* «Mi inscripción» con el aspecto del formulario: reglas de la web (app.css)
   que usan sus plantillas, sobre las variables del formulario. */
.button--compact {
    min-height: 36px;
    padding: 0.45rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.text-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.registration-group + .registration-group {
    margin-top: 0.9rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.9rem;
}

.form-grid__full {
    grid-column: 1 / -1;
}

.form-grid label,
.dynamic-formset label {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.registration-label--required::after {
    content: " *";
    color: var(--color-coral);
    font-weight: 700;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.dynamic-formset input,
.dynamic-formset textarea {
    width: 100%;
    padding: 0.58rem 0.72rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.form-grid--contact {
    align-items: start;
}

.form-grid__field--compact {
    max-width: 34rem;
}

.help-text,
.error-text {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
}

.error-text {
    color: var(--color-coral);
    font-weight: 700;
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.wizard-actions--compact {
    margin-top: 0;
    margin-bottom: 0.7rem;
}

.registration-contact-summary__actions .text-link,
.registration-participant-card__actions .text-link {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.form-grid--participant {
    gap: 0.6rem 0.8rem;
}

.programme-badge--accent {
    background: rgba(176, 23, 134, 0.1);
    color: var(--color-magenta);
}

.programme-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(176, 23, 134, 0.12);
    color: var(--color-magenta);
    font-weight: 700;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    body {
        font-size: 0.98rem;
    }

    .container {
        width: min(calc(100% - 1.2rem), var(--max-width));
    }

    .brand__logo {
        width: clamp(105px, 30vw, 115px);
        max-height: 44px;
    }

    .site-nav__list {
        gap: 0.3rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .registration-choice-grid {
        grid-template-columns: 1fr;
    }

    .wizard-actions {
        flex-direction: column;
    }

    .registration-contact-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav__list a {
        width: 100%;
        justify-content: center;
        background: rgba(36, 75, 155, 0.05);
        padding: 0.3rem 0.6rem;
        font-size: 0.92rem;
    }

    .hero {
        padding-top: 1rem;
    }

    .hero__panel {
        border-radius: 24px;
    }

    .hero__panel--simple {
        padding: 1rem;
    }

    .hero__banner img {
        max-height: 260px;
    }

    .hero__content,
    .programme-day-section {
        padding-left: 0;
        padding-right: 0;
    }

    .programme-page__banner img {
        max-height: 150px;
    }

    .programme-slot {
        gap: 0.5rem;
    }

    .programme-slot__time,
    .programme-time-group__time {
        text-align: left;
    }

    .programme-slot-cards,
    .programme-slot-cards.has-multiple {
        grid-template-columns: 1fr;
    }

    .programme-item-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .programme-item-card__body,
    .programme-card__body {
        padding: 0.85rem 1rem;
    }

    .programme-modal {
        width: calc(100% - 1rem);
    }

    .programme-modal__header {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__intro {
        font-size: 1rem;
    }

    .site-header {
        top: 0;
    }

    .site-header__inner {
        gap: 0.55rem;
        padding: 0.3rem 0;
        min-height: 48px;
    }

    .section--sponsors-bottom {
        padding: 0.25rem 0;
    }

    .sponsor-banner {
        min-height: 46px;
    }

    .sponsor-banner img {
        max-height: 46px;
    }

    .body--with-bottom-banner main,
    .body--with-bottom-banner .site-footer {
        padding-bottom: 66px;
    }

    .hero__actions {
        align-items: stretch;
    }

    .hero__actions .button,
    .site-header__cta {
        width: 100%;
    }

    .programme-item-card,
    .programme-highlight-card,
    .card,
    .empty-state {
        padding: 1.2rem;
    }
}

.portal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.portal-header h1 {
    margin: 0.1rem 0 0.3rem;
}

.portal-header__eyebrow {
    margin: 0;
    color: var(--color-magenta);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.portal-card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(42, 42, 42, 0.05);
}

.portal-card--wide {
    grid-column: 1 / -1;
}

.portal-card h2 {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}

.portal-muted {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.portal-data {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.portal-data div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 0.4rem;
}

.portal-data dt {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.portal-data dd {
    margin: 0;
    text-align: right;
}

.portal-list {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
}

.portal-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(245, 247, 250, 0.7);
}

.portal-list__row span {
    display: grid;
    gap: 0.1rem;
}

.portal-participant {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(245, 247, 250, 0.7);
}

.portal-participant__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.portal-activities {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.portal-message {
    padding: 0.7rem 0.8rem;
    border-left: 3px solid var(--color-magenta);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(245, 247, 250, 0.7);
}

.portal-message p {
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

.portal-billing {
    margin-bottom: 0.7rem;
}

@media (max-width: 820px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Portal: pantalla de acceso ---------- */

.portal-auth {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 7vw, 4.5rem) 1rem clamp(3rem, 9vw, 5.5rem);
}

.portal-auth__card {
    position: relative;
    width: min(100%, 27rem);
    padding: 2.4rem 2.1rem 2rem;
    border: 1px solid rgba(36, 75, 155, 0.1);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 60px rgba(31, 41, 55, 0.1);
    text-align: center;
    overflow: hidden;
}

.portal-auth__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-primary-light) 45%,
        var(--color-magenta)
    );
}

.portal-auth__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(36, 75, 155, 0.12), rgba(30, 156, 230, 0.14));
    color: var(--color-primary);
}

.portal-auth__eyebrow {
    margin: 0;
    color: var(--color-magenta);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.portal-auth__title {
    margin: 0.2rem 0 0.55rem;
    color: var(--color-primary);
    font-size: clamp(1.6rem, 4vw, 1.9rem);
    line-height: 1.15;
}

.portal-auth__lead {
    margin: 0 0 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.portal-auth__form {
    display: grid;
    gap: 0.9rem;
    text-align: left;
}

.portal-field__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 700;
}

.portal-field__input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-size: 1rem;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

.portal-field__input::placeholder {
    color: var(--color-text-muted);
}

.portal-field__input:focus {
    background: var(--color-surface);
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 4px rgba(30, 156, 230, 0.16);
    outline: none;
}

.portal-auth__submit {
    width: 100%;
    padding-block: 0.95rem;
}

.portal-auth__note {
    margin: 1.3rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ---------- Portal: modal de acceso ---------- */

.portal-modal {
    max-width: min(100% - 2rem, 27rem);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.portal-modal::backdrop {
    background: rgba(17, 26, 46, 0.45);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.portal-modal[open] {
    animation: portal-modal-in 200ms ease-out;
}

.portal-auth__card--modal {
    width: 100%;
    box-shadow: 0 30px 70px rgba(10, 18, 35, 0.3);
}

.portal-modal__close {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(10, 18, 35, 0.18);
    transition:
        color var(--transition),
        transform var(--transition);
}

.portal-modal__close:hover {
    color: var(--color-text);
    transform: scale(1.06);
}

/* Bloquea el scroll del fondo mientras el modal está abierto. Se hace con CSS
   (no con una clase por JS) para que nunca pueda quedarse bloqueado si un
   evento no llega a dispararse. */
body:has(.portal-modal[open]) {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .portal-modal[open] {
        animation: none;
    }
}

/* ---------- La inscripción se escribe en mayúsculas ----------
   Los datos acaban en acreditaciones, listados y facturas, y conviene que vayan
   todos igual. Se ve así mientras se escribe; el servidor lo guarda igual, de
   modo que lo que se ve y lo que se guarda coinciden.

   Los correos quedan fuera: una dirección en mayúsculas se ve mal y hay
   servidores que la tratan distinto. */
.registration-page input[type="text"],
.registration-page input[type="tel"],
.registration-page textarea,
.portal-auth input[type="text"] {
    text-transform: uppercase;
}

/* Preguntas propias del congreso: opciones (sí/no, varias) como pastillas. */
.question-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.question-options .question-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 500;
}

.question-options .question-option input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--color-magenta);
}

.question-options .question-option:has(input:checked) {
    border-color: var(--color-magenta);
    background: rgba(176, 23, 134, 0.06);
}

/* «Mi inscripción»: lo que escribe el inscrito, distinguido de la organización. */
.portal-message--own {
    border-left: 3px solid var(--color-magenta);
    padding-left: 0.75rem;
}

.portal-reply {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.portal-reply .button {
    justify-self: start;
}

/* En el aspecto del formulario, la cabecera de «Mi inscripción» y «Pagar ahora»
   van en tarjeta: si no, quedan sobre la imagen de cabecera. */
.fx .portal-header,
.fx .payment-options {
    background: #FFFFFF;
    border-radius: var(--r-lg);
    padding: 24px 28px;
    box-shadow: 0 30px 60px -36px rgba(18, 35, 58, .35);
}
.fx .portal-header h1 { color: var(--ft); }

/* «Inscribirme» sin activar hasta completar lo obligatorio */
.fx-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.fx-pending { margin: 10px 0 0; font-size: 14px; color: var(--muted); text-align: right; }

/* Banners de entidades (Configuración del congreso → Entidades) */
.entity-banner { padding: 18px 0; }
.entity-banner--bg-white { background: #FFFFFF; border-top: 1px solid #E2E8F0; }
.entity-banner--bg-soft { background: #F3F6FA; }
.entity-banner__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; }
.entity-banner__group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.entity-banner__role { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #4A5A70; }
.entity-banner__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.entity-banner__logos img { display: block; width: auto; object-fit: contain; }
.entity-banner__logos--large img { max-height: 72px; max-width: 220px; }
.entity-banner__logos--standard img { max-height: 62px; max-width: 190px; }
.entity-banner__logos--medium img { max-height: 52px; max-width: 160px; }
.entity-banner__logos--small img { max-height: 34px; max-width: 110px; }
.entity-banner--web_sticky { position: sticky; bottom: 0; z-index: 20; padding: 10px 0; box-shadow: 0 -8px 20px -16px rgba(0, 0, 0, .4); }
.fx-hero__entities .entity-banner { margin-top: 16px; border-radius: var(--r-lg, 16px); border: 0; }
/* El recuadro de tarjeta de Redsys (InSite), centrado y a su medida dentro del método. */
.fx-pay-method .checkout__card { width: 100%; max-width: 440px; margin: 4px auto; }

/* Pie común de las plataformas de FGULEM (templates/core/_platform_footer.html):
   discreto pero presente. */
.fx .platform-footer { margin: 0; padding: 18px 16px 24px; border-top: 1px solid rgba(15, 23, 42, .08); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 12.5px; line-height: 1.5; color: #4B5563; text-align: center; }
.fx .platform-footer a { color: inherit; text-decoration: none; }
.fx .platform-footer__brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ft) !important; }
.fx .platform-footer__brand img { display: block; width: 20px; height: 20px; }
.fx .platform-footer__brand strong { font-weight: 800; font-size: 13.5px; }
.fx .platform-footer__by { font-weight: 700; color: var(--ft) !important; }
.fx .platform-footer__by:hover, .fx .platform-footer__brand:hover strong { text-decoration: underline; }
.fx .platform-footer__sep { opacity: .5; }
.fx .platform-footer__version { opacity: .7; font-size: 11.5px; }

/* Resultado del pago: datos del pago y resumen de lo pagado. */
.fx-receipt { display: flex; flex-direction: column; gap: 12px; }
.fx-receipt__lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-receipt__lines td { padding: 9px 0; border-bottom: 1px solid #E8EDF3; vertical-align: top; }
.fx-receipt__lines td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 12px; }
.fx-receipt__lines small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fx-receipt__total td { border-bottom: 0; border-top: 2px solid var(--fp); font-weight: 800; font-size: 16px; padding-top: 12px; }
.fx-receipt__total td:last-child { color: var(--fp); font-size: 20px; }

/* «Opciones de pago»: tarjeta, PayPal y transferencia; y el aviso de pago pendiente. */
.fx-done__icon--pending { background: #FFF3D6; color: #8A5A00; }
.fx-done__status { margin: 0 0 6px; display: inline-block; padding: 3px 12px; border-radius: 999px; background: #FFF3D6; color: #8A5A00; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fx-pay-all { display: flex; flex-direction: column; gap: 12px; }
.fx-pay-all .fx-pay-options { gap: 12px; }
.fx-pay-transfer { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1.5px solid #DCE3EC; border-radius: var(--r-lg); background: #FFFFFF; }
.fx-pay-transfer.is-chosen { border-color: var(--fp); }
.fx-pay-transfer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-pay-transfer .fx-help { margin: 0; }

/* Bloque «Comunicaciones»: una pregunta por línea (Conference, Forum…) */
.fx-abstract + .fx-abstract { margin-top: 1.6rem; }
.fx-abstract__items { display: grid; gap: 0.8rem; margin-top: 0.8rem; }


/* Títulos largos («Mis comunicaciones») en pantallas estrechas */
.portal-header h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* «Confirmar correo electrónico», debajo del correo */
.fx-field--confirm { margin-top: 0.9rem; }

/* En el móvil, las tarifas de cada grupo en filas: nombre a la izquierda, precio a la derecha. */
@media (max-width: 560px) {
    .fx-options--grouped { grid-template-columns: 1fr; gap: 8px; }
    .fx-options--grouped .fx-option { padding: 12px 14px; align-items: center; }
    .fx-options--grouped .fx-option__body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
    .fx-options--grouped .fx-option__price { margin-top: 0; font-size: 17px; }
}
.fx-abstract__optout { margin-top: 16px; }

/* ── Formulario de un congreso con web en GesCon: viste como su web ─────────────
   (cabecera con la foto de la portada bajo el color principal, logos en blanco,
   rayita del acento en los títulos y pie del color del congreso). */
.fx--web { background: color-mix(in srgb, var(--fp) 4%, #FFFFFF); }
.fx-hero--web {
    position: relative;
    min-height: 0;
    padding: 18px 0 116px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fp) 45%, rgba(0, 0, 0, .55)) 0%, color-mix(in srgb, var(--fp) 82%, transparent) 70%, var(--fp) 100%),
        var(--fx-photo, linear-gradient(130deg, var(--fp), color-mix(in srgb, var(--fp) 55%, #000)));
    background-size: cover;
    background-position: center 35%;
}
.fx--web .fx-main { position: relative; z-index: 2; }
.fx-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.fx-top__brand { display: inline-flex; }
.fx-top__logo { display: block; max-height: 64px; max-width: 220px; }
.fx-top__host { display: inline-flex; padding: 6px 10px; border-radius: 10px; background: #FFFFFF; }
.fx-top__host img { display: block; height: 42px; width: auto; }
.fx-top__space { flex: 1; }
.fx-top__back { color: #FFFFFF !important; font-size: 14px; font-weight: 700; text-decoration: none; opacity: .9; }
.fx-top__back:hover { opacity: 1; text-decoration: underline; }
.fx-hero--web .fx-tools__link { background: transparent; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .85); border-radius: 999px; box-shadow: none; }
.fx-hero--web .fx-tools__link:hover { background: #FFFFFF; color: var(--fp) !important; }
.fx-intro-hero { margin-top: 40px; color: #FFFFFF; }
.fx-intro-hero p { margin: 0; }
.fx-intro-hero__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--fa) 45%, #FFFFFF); }
.fx-intro-hero__eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--fa); }
.fx-intro-hero__title { max-width: 820px; margin-top: 12px !important; font-family: var(--fh, inherit); font-size: clamp(26px, 4.2vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.fx-intro-hero__meta { margin-top: 10px !important; font-size: 17px; opacity: .92; }
.fx-intro-hero__sub { max-width: 720px; margin-top: 8px !important; opacity: .85; }
.fx--web .fx-card { border-radius: 22px; box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--fp) 40%, transparent); }
.fx--web .fx-head__title { font-size: clamp(20px, 2.6vw, 24px); color: var(--fp); }
.fx--web .fx-section__title { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .16em; }
.fx--web .fx-section__title::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--fa); }
.fx--web input:not([type="checkbox"]):not([type="radio"]), .fx--web select, .fx--web textarea { border-radius: 12px; }
.fx--web input:focus, .fx--web select:focus, .fx--web textarea:focus { border-color: var(--fp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa) 30%, transparent); outline: none; }
.fx-foot { margin-top: 10px; padding: 34px 0; background: var(--fp); color: #FFFFFF; }
.fx-foot__grid { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.fx-foot__logo { display: block; max-height: 60px; max-width: 200px; }
.fx-foot__text { margin: 0; font-size: 14px; line-height: 1.6; opacity: .92; }
@media (max-width: 700px) {
    .fx-top__logo { max-height: 50px; }
    .fx-top__host img { height: 32px; }
    .fx-top__back { display: none; }
    .fx-intro-hero { margin-top: 28px; }
    .fx-intro-hero__meta { font-size: 15px; }
}
.fx-actions--center { justify-content: center; flex-wrap: wrap; border-top: 0; margin: 18px 0 0; padding-top: 0; }