/* Sinergia UI Kit: tokens (tokens.json) y componentes (components/bundle.css)
   del kit oficial, sin cambios. Si el kit se actualiza, se reemplaza este
   archivo entero. Los ajustes propios de la landing van en estilos.css. */

/* ═════════ Sinergia UI Kit · tokens ═════════
   Copiados de tokens.json del kit oficial. Colores, radios, sombras y
   degradados salen siempre de acá: no usar valores sueltos. */
:root{
  --green:#3fb28c;
  --green-grad:#7fddb8;
  --green-hover:#38a07e;
  --green-active:#2f8a6c;
  --green-deep:#2a7f63;
  --green-soft:rgba(63,178,140,.1);
  --green-tint:rgba(127,221,184,.15);
  --green-focus:rgba(63,178,140,.24);
  --green-selected-bg:rgba(63,178,140,.05);
  --green-selected-line:rgba(63,178,140,.4);
  --green-outline:rgba(63,178,140,.45);
  --green-wash:rgba(63,178,140,.06);
  --green-featured-line:rgba(63,178,140,.35);
  --green-muted:rgba(63,178,140,.6);
  --ink:#0e1113;
  --black-soft:#494b4f;
  --text-gray:#6e7175;
  --text-faint:#83878b;
  --gray:#cccbcb;
  --gray-hover:#bcbbbb;
  --hairline:#e8e9e8;
  --gray-light:#f5f5f5;
  --control-fill:rgba(204,203,203,.32);
  --white:#ffffff;
  --req:#e5484d;
  --req-ring:rgba(229,72,77,.12);
  --req-wash:rgba(229,72,77,.07);
  --req-line:rgba(229,72,77,.28);
  --alerta:#f47b24;
  --alerta-light:#f9a45f;
  --alerta-deep:#b4520c;
  --alerta-wash:rgba(244,123,36,.07);
  --alerta-line:rgba(244,123,36,.28);
  --alerta-ring:rgba(244,123,36,.12);

  --font-display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-texto:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;

  --r-check:6px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-hoja-mobile:20px;
  --r-hoja:26px;
  --r-pill:999px;

  --sombra:0 24px 60px -28px rgba(11,61,46,.45),0 4px 14px -8px rgba(11,61,46,.2);
  --sombra-destacada:0 2px 6px -3px rgba(14,17,19,.05),0 14px 34px -20px rgba(47,138,108,.42);
  --sombra-thumb:0 1px 2px rgba(14,17,19,.06),0 2px 6px -4px rgba(14,17,19,.28);

  --green-radial:radial-gradient(74.28% 275.42% at 50% 50%,#7fddb8 0%,#3fb28c 100%);
  --fondo-pagina:radial-gradient(ellipse 92% 92% at 50% 50%,#7fddb8 0%,#3fb28c 100%);
  --avance:linear-gradient(90deg,#3fb28c 0%,#7fddb8 100%);
  --alerta-grad:linear-gradient(140deg,#f9a45f 0%,#f47b24 100%);
  color-scheme:light;
}

/* ═════════ Sinergia UI Kit · componentes (bundle.css del kit, sin el @import de fuentes ni las vistas previas) ═════════ */
/* Sinergia UI Kit · componentes
   Se carga después de tokens.css: todos los colores, radios, sombras y
   degradados salen de ahí. Acá solo viven los íconos que se usan como
   máscara (no son tokens) y las reglas de cada componente. */

:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 24'%3E%3Cpath fill='%23000' d='M9.78 23.64c.06 0 .11 0 .16 0 .74 0 1.45-.3 1.98-.82L29.7 4.71c1.07-1.09 1.05-2.84-.03-3.92-1.1-1.07-2.85-1.06-3.92.03L10.2 16.66 4.96 9.88c-.93-1.21-2.67-1.44-3.88-.5C-.13 10.32-.36 12.06.58 13.27l7.17 9.29c.49.64 1.23 1.03 2.03 1.08Z'/%3E%3C/svg%3E");
  --check-fino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6 9.6 17.7 19.5 6.6'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 114 114%22%3E%3Cpath fill=%22%23000%22 d=%22M74.9452 29.7063C75.0385 29.8619 74.9452 30.1107 74.8208 30.2352C73.9653 30.7795 70.9479 34.4813 70.3413 34.6369C69.7347 34.7924 66.9973 32.8948 66.3596 32.6149C51.7081 26.0512 34.5835 34.0147 30.1351 49.3195C24.5514 68.5438 41.5515 86.7882 61.1025 82.6198C75.2252 79.6024 84.2774 65.6042 81.5244 51.4192L86.8593 46.0221C91.4943 58.1851 87.5437 72.5722 78.0715 81.2511C59.6715 98.0957 29.653 89.4012 23.3693 65.3397C15.8569 36.6122 46.8553 12.9395 72.41 28.1043C72.7366 28.3065 74.8519 29.5819 74.9296 29.7063H74.9452Z%22/%3E%3Cpath fill=%22%23000%22 d=%22M86.2524 27.8398L91.1363 32.5682L52.1744 71.53L36.543 55.8831L41.2868 50.9992L52.1744 61.8868L86.2524 27.8398Z%22/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  --ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 5a1.4 1.4 0 0 1 1.4 1.5l-.4 5.6a1 1 0 0 1-2 0l-.4-5.6A1.4 1.4 0 0 1 12 6Zm0 10a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E");
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ═════════ Base ═════════ */
.sf-root { font-family: var(--font-texto); font-size: 16px; line-height: 1.45; color: var(--black-soft); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.sf-root h1, .sf-root p, .sf-titulo, .sf-lead, .sf-label, .sf-list li, .sf-field-error { text-wrap: balance; }

/* ═════════ Fondo: sobre verde (con hoja) o sobre blanco ═════════ */
body.sf-fondo { margin: 0; padding: 40px 20px 64px; min-height: 100vh; min-height: 100dvh; background: var(--green); }
body.sf-fondo::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--fondo-pagina); }
body.sf-fondo-blanco { margin: 0; min-height: 100vh; background: var(--white); }
.sf-pagina { max-width: 1120px; margin: 0 auto; padding: 40px 52px 64px; }
.sf-brandbar { display: flex; }
.sf-mark { display: block; color: var(--white); }
.sf-mark svg, .sf-mark img { display: block; width: 100%; height: auto; }
.sf-hoja { background: var(--white); border-radius: var(--r-hoja); box-shadow: var(--sombra); overflow: hidden; }
.sf-hoja-top { padding: 36px 52px 26px; border-bottom: 1px solid var(--hairline); }
.sf-hoja-body { padding: 40px 52px 48px; }
.sf-hoja-body.con-pasos { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 52px; }
.sf-hoja-body.con-pasos > .sf-lateral { border-right: 1px solid var(--hairline); padding-right: 24px; }
.sf-panel { animation: sfFadeUp 360ms var(--ease) both; }
@keyframes sfFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ═════════ Progreso ═════════ */
.sf-progress { height: 6px; background: var(--hairline); border-radius: var(--r-pill); overflow: hidden; }
.sf-progress-fill { height: 100%; width: 0%; background: var(--avance); border-radius: var(--r-pill); transition: width 420ms var(--ease); }
.sf-step-count { margin-top: 15px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }

/* ═════════ Pasos ═════════ */
.sf-pasos { list-style: none; margin: 0; padding: 0; }
.sf-paso { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 28px; position: relative; }
.sf-paso:last-child { padding-bottom: 0; }
.sf-paso::after { content: ''; position: absolute; left: 14px; top: 38px; bottom: 8px; width: 2px; background: var(--hairline); border-radius: 2px; transition: background 320ms ease; }
.sf-paso:last-child::after { display: none; }
.sf-paso-num { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gray); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--text-faint); background: var(--white); font-variant-numeric: tabular-nums; transition: border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease); }
.sf-paso-num::after { content: ''; position: absolute; inset: 8px; opacity: 0; transform: scale(0.5); background: var(--white); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; transition: opacity 200ms ease, transform 240ms var(--ease); }
.sf-paso-tx span { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); line-height: 1.6; }
.sf-paso-tx b { display: block; font-size: 0.9rem; font-weight: 500; color: var(--text-gray); transition: color 240ms ease; }
.sf-paso.is-activo .sf-paso-num { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 4px var(--green-focus); animation: sfPulso 2.6s ease-in-out infinite; }
.sf-paso.is-activo .sf-paso-tx b { color: var(--ink); font-weight: 600; }
.sf-paso.is-hecho .sf-paso-num { border-color: var(--green); background: var(--green); color: transparent; }
.sf-paso.is-hecho .sf-paso-num::after { opacity: 1; transform: scale(1); }
.sf-paso.is-hecho .sf-paso-tx b { color: var(--black-soft); }
.sf-paso.is-hecho::after { background: var(--green); }
@keyframes sfPulso { 0%, 100% { box-shadow: 0 0 0 4px var(--green-focus); } 50% { box-shadow: 0 0 0 8px var(--green-soft); } }

/* ═════════ Encabezado ═════════ */
.sf-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.sf-titulo { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; line-height: 1.14; color: var(--ink); margin: 0 0 20px; }
.sf-titulo.is-xl { font-size: 2.75rem; line-height: 1.08; letter-spacing: -0.035em; }
.sf-sub { font-size: 1.08rem; line-height: 1.4; color: var(--text-gray); margin: -10px 0 22px; max-width: 52ch; }
.sf-lead { font-size: 0.95rem; color: var(--text-gray); line-height: 1.45; margin: 0 0 30px; max-width: 62ch; }
.sf-subtitulo { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 14px; }
.sf-nota { font-size: 0.82rem; line-height: 1.45; color: var(--text-gray); margin: 14px 0 0; }
.sf-nota + .sf-nota { margin-top: 6px; }
.sf-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 0 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-gray); }
.sf-sec:first-child { margin-top: 0; }

/* ═════════ Botones ═════════ */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2; padding: 14px 28px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.sf-btn:focus-visible, .sf-btn.is-focus, .sf-btn-text:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sf-btn-primary { background: var(--green); color: var(--white); border-color: var(--green); }
.sf-btn-primary:hover:not(:disabled), .sf-btn-primary.is-hover { background: var(--green-hover); border-color: var(--green-hover); }
.sf-btn-primary:active:not(:disabled), .sf-btn-primary.is-active { background: var(--green-active); border-color: var(--green-active); }
.sf-btn-primary:disabled { background: var(--hairline); border-color: var(--hairline); color: var(--text-faint); cursor: not-allowed; }
.sf-btn-back { background: var(--white); color: var(--green); border-color: var(--green-outline); }
.sf-btn-back:hover, .sf-btn-back.is-hover { border-color: var(--green); background: var(--green-soft); }
.sf-btn-back:active, .sf-btn-back.is-active { background: var(--green-tint); }
.sf-btn-block { width: 100%; padding: 16px 26px; font-size: 1rem; }
.sf-btn-sm { padding: 9px 18px; font-size: 0.84rem; }
.sf-btn-text { background: none; border: none; color: var(--text-gray); font-family: inherit; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; transition: color 160ms ease; }
.sf-btn-text:hover, .sf-btn-text.is-hover { color: var(--green); }
.sf-link { background: none; border: 0; padding: 6px 0; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 160ms ease; }
.sf-link:hover, .sf-link.is-hover { color: var(--green-hover); }
.sf-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: var(--white); animation: sfSpin 700ms linear infinite; }
.sf-btn:disabled .sf-spin, .sf-btn-back .sf-spin { border-color: var(--green-focus); border-top-color: var(--green); }
@keyframes sfSpin { to { transform: rotate(360deg); } }

/* ═════════ Barra de acciones ═════════ */
.sf-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 34px; }
.sf-nav .sf-btn-back { margin-right: auto; }
.sf-nav.is-inicio { justify-content: flex-start; }
.sf-nav.is-inicio .sf-btn-back { margin-right: 0; }

/* ═════════ Campos ═════════ */
.sf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 22px; }
.sf-field-row.full { grid-template-columns: 1fr; }
.sf-field-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.sf-field-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-gray); transition: color 160ms ease; }
.sf-label .req { color: var(--req); margin-left: 1px; }
.sf-field-group:focus-within .sf-label, .sf-field-group.is-focus .sf-label { color: var(--green); }
.sf-field { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--gray); background: var(--white); font-family: inherit; font-size: 1rem; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.sf-field::placeholder { color: var(--text-faint); }
.sf-field:hover, .sf-field.is-hover { border-color: var(--gray-hover); }
.sf-field:focus, .sf-field.is-focus { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-focus); }
.sf-field.is-error, .sf-field[aria-invalid="true"] { border-color: var(--req); box-shadow: 0 0 0 4px var(--req-ring); }
.sf-field:disabled { background-color: var(--gray-light); border-color: var(--hairline); color: var(--text-faint); cursor: not-allowed; }
select.sf-field { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 11px; padding-right: 42px; cursor: pointer; }
select.sf-field.vacio { color: var(--text-faint); }
textarea.sf-field { min-height: 120px; resize: vertical; line-height: 1.45; text-overflow: clip; }
.sf-field-error { font-size: 0.82rem; line-height: 1.4; color: var(--req); margin: 2px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.sf-field-error::before { content: ''; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; background: var(--req); -webkit-mask: var(--ico-error) center / contain no-repeat; mask: var(--ico-error) center / contain no-repeat; }
.sf-ayuda { font-size: 0.82rem; line-height: 1.4; color: var(--text-gray); margin: 0; }
.sf-ayuda.is-ok { color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sf-ayuda.is-ok::before { content: ''; flex: 0 0 15px; width: 15px; height: 15px; background: var(--green); -webkit-mask: var(--check-fino) center / contain no-repeat; mask: var(--check-fino) center / contain no-repeat; }
.sf-buscar { position: relative; }
.sf-buscar .sf-field { padding-left: 46px; }
.sf-buscar svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text-faint); fill: none; stroke-width: 1.9; stroke-linecap: round; pointer-events: none; transition: stroke 160ms ease; }
.sf-buscar:focus-within svg, .sf-buscar.is-focus svg { stroke: var(--green); }
/* fila con etiqueta a la izquierda y un control a la derecha */
.sf-fila-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-fila-control .sf-label { color: var(--black-soft); }

/* ═════════ Casilla ═════════ */
.sf-checks { display: grid; gap: 10px; }
.sf-check { display: flex; gap: 14px; align-items: center; position: relative; font-size: 0.9rem; color: var(--black-soft); line-height: 1.4; cursor: pointer; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--white); transition: border-color 160ms ease, background 160ms ease; }
.sf-check.con-detalle { align-items: flex-start; }
.sf-check:hover, .sf-check.is-hover { border-color: var(--gray); }
.sf-check:has(input:checked) { border-color: var(--green-selected-line); background: var(--green-selected-bg); }
.sf-check a { color: var(--green); font-weight: 600; }
.sf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-check .box { flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid var(--gray); border-radius: var(--r-check); background: var(--white); position: relative; transition: background 160ms ease, border-color 160ms ease; }
.sf-check.con-detalle .box { margin-top: 1px; }
.sf-check input:checked + .box { background: var(--green); border-color: var(--green); }
.sf-check .box::after { content: ''; position: absolute; inset: 4px; opacity: 0; transform: scale(0.4); background: var(--white); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; transition: opacity 140ms ease, transform 260ms var(--ease); }
.sf-check input:checked + .box::after { opacity: 1; transform: scale(1); }
.sf-check input:focus-visible + .box, .sf-check.is-focus .box { box-shadow: 0 0 0 4px var(--green-focus); }
.sf-check-tx b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sf-check-tx span { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--text-gray); }
.sf-check-tx .motivo { margin-top: 6px; font-size: 0.82rem; line-height: 1.45; }
.sf-check.is-disabled { cursor: default; background: var(--gray-light); border-color: var(--hairline); }
.sf-check.is-disabled .box { background: var(--gray-light); border-color: var(--hairline); }
.sf-check.is-disabled b { color: var(--text-gray); }

/* ═════════ Tarjeta seleccionable ═════════ */
.sf-opciones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf-opcion { position: relative; text-align: left; font-family: inherit; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 52px 18px 20px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.sf-opcion::after { content: ''; position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gray); background: var(--white); transition: background 160ms ease, border-color 160ms ease; }
.sf-opcion::before { content: ''; position: absolute; top: 23px; right: 23px; width: 10px; height: 10px; z-index: 1; opacity: 0; background: var(--white); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.sf-opcion:hover, .sf-opcion.is-hover { border-color: var(--gray); }
.sf-opcion b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.sf-opcion span { font-size: 0.88rem; line-height: 1.4; color: var(--text-gray); }
.sf-opcion[aria-pressed="true"], .sf-opcion.selected { border-color: var(--green); background: var(--green-selected-bg); box-shadow: 0 0 0 1px var(--green); }
.sf-opcion[aria-pressed="true"]::after, .sf-opcion.selected::after { background: var(--green); border-color: var(--green); }
.sf-opcion[aria-pressed="true"]::before, .sf-opcion.selected::before { opacity: 1; }
.sf-opcion:focus-visible, .sf-opcion.is-focus { outline: 2px solid var(--green); outline-offset: 3px; }

/* ═════════ Selector segmentado ═════════ */
.sf-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--gray-light); border-radius: var(--r-pill); }
.sf-switch-thumb { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px); background: var(--white); border-radius: var(--r-pill); box-shadow: var(--sombra-thumb); transition: transform 300ms var(--ease); }
.sf-switch.is-segunda .sf-switch-thumb { transform: translateX(100%); }
.sf-switch-opt { position: relative; z-index: 1; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: inherit; font-size: 0.86rem; font-weight: 500; padding: 9px 18px; border-radius: var(--r-pill); color: var(--text-gray); transition: color 220ms ease; white-space: nowrap; }
.sf-switch-opt:hover, .sf-switch-opt.is-hover { color: var(--black-soft); }
.sf-switch-opt.selected { color: var(--green); font-weight: 600; }
.sf-switch-opt:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sf-switch-off { flex: 0 0 auto; padding: 2px 6px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-deep); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; }
.sf-switch-opt.selected .sf-switch-off { background: var(--green); color: var(--white); }

/* ═════════ Contador ═════════ */
.sf-stepper { display: inline-flex; align-items: center; gap: 6px; }
.sf-stepper button { position: relative; width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%; background: var(--control-fill); color: var(--ink); font-family: inherit; font-size: 0; line-height: 1; cursor: pointer; padding: 0; margin: 0; transition: background 160ms ease, color 160ms ease, transform 120ms var(--ease); }
.sf-stepper button::before, .sf-stepper button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.sf-stepper button:first-child::after { content: none; }
.sf-stepper button:last-child::after { transform: translate(-50%, -50%) rotate(90deg); }
.sf-stepper button:hover:not(:disabled), .sf-stepper button.is-hover { background: var(--green-tint); color: var(--green-deep); }
.sf-stepper button:active:not(:disabled), .sf-stepper button.is-active { transform: scale(0.9); }
.sf-stepper button:disabled { background: var(--gray-light); color: var(--gray); cursor: not-allowed; }
.sf-stepper button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sf-stepper input { width: 52px; text-align: center; border: 0; background: transparent; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; padding: 6px 0; border-radius: var(--r-sm); }
.sf-stepper input::-webkit-outer-spin-button, .sf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-stepper input:focus-visible { box-shadow: 0 0 0 3px var(--green-focus); }
.sf-cant { display: flex; flex-direction: column; align-items: center; min-width: 104px; }
.sf-cant output { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-cant .parcial { min-height: 17px; font-size: 0.76rem; line-height: 17px; color: var(--text-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═════════ Tarjeta ═════════ */
.sf-tarjeta { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px; margin-bottom: 18px; }
.sf-tarjeta.is-gris { background: var(--gray-light); border-color: transparent; padding: 26px 28px; }
.sf-tarjeta-titulo { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.sf-tarjeta.sola .sf-tarjeta-titulo { font-size: 1.35rem; margin-bottom: 8px; }
.sf-tarjeta-bajada { font-size: 0.9rem; line-height: 1.45; color: var(--text-gray); margin: -4px 0 18px; max-width: 62ch; }
.sf-tarjeta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sf-tarjeta-head b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.sf-tarjeta-head span { display: block; font-size: 0.9rem; color: var(--text-gray); margin-top: 3px; }
.sf-tarjeta.is-destacada { border-color: var(--green-featured-line); box-shadow: var(--sombra-destacada); background: linear-gradient(115.71deg, rgba(255, 255, 255, 0.1) 0%, rgba(63, 178, 140, 0.1) 20%, rgba(255, 255, 255, 0.1) 100%), var(--white); }
.sf-tarjeta.is-destacada .sf-tarjeta-titulo { font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 4px; }
.sf-tarjeta-pie { margin: 24px -28px -28px; padding: 22px 28px 24px; background: var(--green-wash); border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-lg) var(--r-lg); display: grid; gap: 18px; }
.sf-tarjeta > :last-child { margin-bottom: 0; }
.sf-tarjeta > .sf-tarjeta-pie:last-child { margin-bottom: -28px; }
.sf-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sf-grilla > .sf-tarjeta { margin-bottom: 0; }

/* ═════════ Métrica sobre blanco ═════════ */
.sf-metrica-simple { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sf-metrica-simple .pre { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; color: var(--green-muted); align-self: flex-end; }
.sf-metrica-simple .val { font-family: var(--font-display); font-size: clamp(2.9rem, 13vw, 3.6rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; color: var(--green); font-variant-numeric: tabular-nums; }
.sf-metrica-simple .post { font-size: 0.86rem; font-weight: 700; color: var(--green-muted); align-self: flex-end; }
.sf-metrica-simple .sf-etiqueta { align-self: center; margin: 0 0 0.5em 6px; }
.sf-metrica-simple + .sf-nota { margin-top: 6px; }

/* ═════════ Acordeón ═════════ */
.sf-details { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px 20px; }
.sf-details summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: var(--r-sm); }
.sf-details summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sf-details summary::-webkit-details-marker { display: none; }
.sf-details summary::after { content: ''; flex: 0 0 20px; height: 20px; background: var(--green); -webkit-mask: var(--chevron) center / 11px no-repeat; mask: var(--chevron) center / 11px no-repeat; transition: transform 260ms var(--ease); }
.sf-details[open] summary::after { transform: rotate(180deg); }
.sf-details[open] > :not(summary) { animation: sfFadeUp 280ms var(--ease) both; }
.sf-details.is-fijo summary { cursor: default; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--text-gray); }
.sf-details.is-fijo summary::after { display: none; }
.sf-details + .sf-details { margin-top: 10px; }

/* ═════════ Lista ═════════ */
.sf-list { list-style: none; padding: 0; margin: 14px 0 0; }
.sf-list.cols { columns: 2; column-gap: 34px; }
.sf-list.cols li { break-inside: avoid; }
.sf-list li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; font-size: 0.88rem; color: var(--black-soft); line-height: 1.4; }
.sf-list li::before { content: ''; flex: 0 0 24px; width: 24px; height: 24px; margin: -2px 0; background: var(--green); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.sf-list.muted li { color: var(--text-gray); }
.sf-list.muted li::before { background: var(--text-faint); -webkit-mask: none; mask: none; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; margin: 8px 6px 0 4px; }
.sf-list-num { list-style: none; counter-reset: p; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sf-list-num li { counter-increment: p; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: 0.92rem; line-height: 1.45; color: var(--black-soft); }
.sf-list-num li::before { content: counter(p); width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ═════════ Lista de datos ═════════ */
.sf-datos { display: flex; flex-direction: column; }
.sf-dato { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; }
.sf-dato:last-child { border-bottom: 0; }
.sf-dato .k { flex: 1 1 auto; min-width: 0; color: var(--text-gray); display: flex; align-items: center; gap: 10px; }
.sf-dato .v { flex: 0 1 auto; margin-left: auto; color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-dato .ico { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--green-tint); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.sf-dato.is-apagado { opacity: 0.45; }
/* etiqueta fuerte: la etiqueta manda y el valor acompaña (calendarios, historiales) */
.sf-datos.etiqueta-fuerte .k { color: var(--ink); font-weight: 600; align-items: baseline; flex-wrap: wrap; }
.sf-datos.etiqueta-fuerte .k small { font-size: 1em; font-weight: 400; color: var(--text-gray); }
.sf-datos.etiqueta-fuerte .v { color: var(--text-gray); font-weight: 400; white-space: nowrap; }
.sf-tarjeta.is-gris .sf-dato { border-bottom-color: #e2e3e2; }
/* en grilla: dato leído, sin filas */
.sf-datos-grilla { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.sf-datos-grilla dt { font-size: 0.68rem; font-weight: 600; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.09em; }
.sf-datos-grilla dd { margin: 4px 0 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }

/* ═════════ Métrica ═════════ */
.sf-metrica { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 26px 28px; border-radius: var(--r-md); background: var(--green-radial); color: var(--white); }
.sf-metrica .lbl { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.sf-metrica .val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-metrica-nota { flex-basis: 100%; margin: 2px 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); }
.sf-metrica.is-apilada { flex-direction: column; align-items: flex-start; }
.sf-datos + .sf-metrica, .sf-dato + .sf-metrica { margin-top: 16px; }
.sf-iva { font-family: var(--font-texto); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.is-bump { animation: sfBump 420ms var(--ease); }
@keyframes sfBump { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ═════════ Elemento de lista ═════════ */
.sf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.sf-item:last-child { border-bottom: 0; }
.sf-item-et { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 300px; }
.sf-miniatura { width: 112px; height: 112px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 46px; line-height: 1; border-radius: var(--r-lg); background: var(--green-tint); }
img.sf-miniatura { object-fit: contain; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 4px; }
.sf-miniatura.is-chica { width: 56px; height: 56px; font-size: 24px; border-radius: var(--r-md); }
.sf-item-tx { min-width: 0; }
.sf-item-tx b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.sf-item-tx .desc { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--text-gray); margin: 3px 0 4px; }
.sf-item-tx .precio { display: block; font-size: 0.9rem; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.sf-item > :last-child:not(.sf-item-et) { margin-left: auto; }
.sf-subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 0.92rem; }
.sf-subtotal span { color: var(--text-gray); }
.sf-subtotal b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ═════════ Etiqueta ═════════ */
.sf-etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-deep); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.sf-etiqueta.is-check { padding: 8px 16px 8px 12px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0; }
.sf-etiqueta.is-check::before { content: ''; flex: 0 0 15px; width: 15px; height: 15px; background: var(--green); -webkit-mask: var(--check-fino) center / contain no-repeat; mask: var(--check-fino) center / contain no-repeat; }
.sf-etiqueta.is-llena { background: var(--green); color: var(--white); }

/* ═════════ Aviso ═════════ */
.sf-aviso { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; background: var(--alerta-wash); border: 1px solid var(--alerta-line); border-radius: var(--r-md); padding: 20px 22px; }
.sf-aviso-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--alerta-grad); box-shadow: 0 0 0 6px var(--alerta-ring); display: flex; align-items: center; justify-content: center; }
.sf-aviso-ico svg { width: 22px; height: 22px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-aviso-ico svg.relleno { width: 20px; stroke: none; }
.sf-aviso-ico svg.relleno path { fill: var(--white); }
.sf-aviso-tx { flex: 1 1 260px; min-width: 0; }
.sf-aviso-et { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alerta-deep); margin-bottom: 5px; }
.sf-aviso-tx b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.sf-aviso-tx p { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--black-soft); }
.sf-aviso-tx a { color: var(--green-deep); }
.sf-aviso.is-error { background: var(--req-wash); border-color: var(--req-line); }
.sf-aviso.is-error .sf-aviso-ico { background: var(--req); box-shadow: 0 0 0 6px var(--req-ring); }
.sf-aviso.is-error .sf-aviso-et { color: var(--req); }
.sf-aviso.is-exito { background: var(--green-selected-bg); border-color: var(--green-selected-line); }
.sf-aviso.is-exito .sf-aviso-ico { background: var(--green-radial); box-shadow: 0 0 0 6px var(--green-tint); }
.sf-aviso.is-exito .sf-aviso-et { color: var(--green-deep); }
.sf-aviso.is-info { background: var(--green-soft); border-color: transparent; }
.sf-aviso.is-info .sf-aviso-et { color: var(--green-deep); }
.sf-aviso.is-info .sf-aviso-tx b { font-family: var(--font-texto); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
.sf-aviso-tx > :last-child { margin-bottom: 0; }

/* ═════════ Mensaje ═════════ */
.sf-mensaje { text-align: center; padding: 20px 0 8px; }
.sf-mensaje-icono { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; background: var(--green-radial); box-shadow: 0 0 0 10px rgba(127, 221, 184, 0.16); animation: sfPop 560ms var(--ease) both; }
.sf-mensaje-icono.is-alerta { background: var(--alerta-grad); box-shadow: 0 0 0 10px var(--alerta-ring); }
.sf-mensaje-icono svg { width: 30px; height: auto; display: block; }
.sf-mensaje-icono svg path { fill: var(--white); }
.sf-mensaje h1, .sf-mensaje h2 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 16px; line-height: 1.16; }
.sf-mensaje p { font-size: 0.96rem; color: var(--text-gray); line-height: 1.5; margin: 0 auto 14px; max-width: 52ch; }
.sf-mensaje .sf-nav { justify-content: center; flex-direction: column; gap: 14px; margin-top: 32px; }
.sf-mensaje .sf-nav .sf-btn-back { margin-right: 0; }
@keyframes sfPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }

/* ═════════ Banner ═════════ */
.sf-banner { background: var(--green-radial); border-radius: var(--r-lg); padding: 44px 40px; color: var(--white); }
.sf-banner-icono { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.24); margin: 0 0 28px; animation: sfPop 560ms var(--ease) both; }
.sf-banner-icono::after { content: ''; position: absolute; inset: 20px 18px; background: var(--green); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.sf-banner h1, .sf-banner h2 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--white); margin: 0 0 24px; text-shadow: 0 1px 3px rgba(11, 61, 46, 0.18); }
.sf-banner .et { margin: 0 0 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.sf-banner .cifra { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-banner p { margin: 18px 0 0; font-size: 0.96rem; line-height: 1.5; color: var(--white); max-width: 52ch; text-shadow: 0 1px 3px rgba(11, 61, 46, 0.22); }
.sf-banner p.et { margin: 0 0 8px; text-shadow: none; }
.sf-banner .sf-nav { margin-top: 28px; justify-content: flex-start; }

/* ═════════ Cargando ═════════ */
.sf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 20px; color: var(--green); font-size: 0.92rem; font-weight: 500; line-height: 1.4; text-align: center; }
.sf-spinner { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid rgba(63, 178, 140, 0.2); border-top-color: var(--green); animation: sfSpin 700ms linear infinite; }

/* ═════════ Aviso en línea ═════════ */
.sf-aviso-linea { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 460px; padding: 14px 16px; border: 1px solid var(--green-selected-line); border-radius: var(--r-sm); background: var(--green-selected-bg); }
.sf-aviso-linea-tx { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.sf-aviso-linea-tx::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; background: var(--green); -webkit-mask: var(--check-fino) center / contain no-repeat; mask: var(--check-fino) center / contain no-repeat; }

/* ═════════ Imagen ═════════ */
.sf-imagen { overflow: hidden; border-radius: var(--r-lg); background: var(--green-tint); border: 1px solid var(--hairline); line-height: 0; }
.sf-imagen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.sf-imagen.is-3x2 img { aspect-ratio: 3 / 2; }

/* ═════════ Responsive ═════════ */
@media (max-width: 900px) {
  body.sf-fondo { padding: 26px 16px 56px; }
  .sf-pagina { padding: 28px 22px 48px; }
  .sf-hoja-top { padding: 30px 22px 20px; }
  .sf-hoja-body { padding: 28px 22px 34px; }
  .sf-hoja-body.con-pasos { display: block; }
  .sf-hoja-body.con-pasos > .sf-lateral { display: none; }
  .sf-titulo, .sf-mensaje h1, .sf-mensaje h2 { font-size: 1.6rem; }
  .sf-titulo.is-xl { font-size: 2.3rem; }
}
@media (max-width: 700px) {
  .sf-banner { padding: 34px 24px; }
  .sf-banner h1, .sf-banner h2 { font-size: 1.5rem; }
  .sf-banner .cifra { font-size: 1.9rem; }
  .sf-imagen img { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  body.sf-fondo { padding: 20px 12px 48px; }
  .sf-pagina { padding: 20px 18px 40px; }
  .sf-hoja { border-radius: var(--r-hoja-mobile); }
  .sf-hoja-top { padding: 28px 18px 18px; }
  .sf-hoja-body { padding: 24px 18px 30px; }
  .sf-field-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
  .sf-field-row.thirds { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .sf-datos-grilla { grid-template-columns: 1fr; }
  .sf-titulo { font-size: 1.45rem; }
  .sf-titulo.is-xl { font-size: 2rem; }
  .sf-tarjeta { padding: 20px 16px; }
  .sf-tarjeta-pie { margin: 20px -16px -20px; padding: 20px 16px; }
  .sf-tarjeta > .sf-tarjeta-pie:last-child { margin-bottom: -20px; }
  .sf-tarjeta.is-gris { padding: 22px 20px; }
  .sf-opciones { grid-template-columns: 1fr; }
  .sf-switch { width: 100%; }
  .sf-switch-opt { padding: 10px 8px; font-size: 0.82rem; }
  .sf-metrica { padding: 22px 20px; }
  .sf-metrica .val { font-size: 1.6rem; }
  .sf-nav { flex-wrap: wrap; }
  .sf-nav .sf-btn { flex: 1; }
  .sf-nav .sf-btn-back { margin-right: 0; }
  .sf-list.cols { columns: 1; }
  .sf-tarjeta-head { flex-direction: column; align-items: stretch; }
  .sf-item-et { gap: 14px; }
  .sf-miniatura { width: 76px; height: 76px; font-size: 34px; border-radius: var(--r-md); }
  .sf-aviso { padding: 18px 16px; gap: 14px; }
  .sf-fila-control { flex-direction: column; align-items: stretch; gap: 10px; }
  .sf-fila-control .sf-stepper { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-spinner, .sf-spin { animation-duration: 2s; }
  .sf-panel, .sf-mensaje-icono, .sf-banner-icono, .sf-details[open] > :not(summary), .is-bump, .sf-paso.is-activo .sf-paso-num { animation: none; }
  .sf-switch-thumb, .sf-progress-fill { transition: none; }
}