/* Interfaz SaaS Framework v1.4.0
   Stable viewport shell: the DECEN Storefront contract (Platform 1.1.361,
   apps/storefront/assets/css/app.css + checkout.css + js/modules/viewport.js)
   made generic. Full specification: VIEWPORT-SHELL.md next to framework.json.
   Product code may override color tokens, never the viewport/header/dock geometry. */
:root{
  --ix-bg:#f4f2ec;
  --ix-paper:#fbfaf6;
  --ix-ink:#111412;
  --ix-muted:#6e746f;
  --ix-line:#dedfd9;
  --ix-accent:#4e66ff;
  --ix-accent-soft:color-mix(in srgb,var(--ix-accent) 11%,white);
  --ix-browser-theme:var(--ix-bg);
  --ix-site-max:1320px;--ix-site-gutter:clamp(36px,6vw,120px);
  --ix-control-radius:13px;
  --ix-shadow:0 24px 70px rgba(24,30,26,.08);

  /* 1. Safe area. env() is the fallback only: ix-saas-shell.js measures it once
     (load + orientation change) and freezes it into the *-static variables, so
     Safari toolbar animations can never move the frame, header or dock. */
  --ix-safe-top-static:env(safe-area-inset-top,0px);
  --ix-safe-right-static:env(safe-area-inset-right,0px);
  --ix-safe-bottom-static:env(safe-area-inset-bottom,0px);
  --ix-safe-left-static:env(safe-area-inset-left,0px);

  /* 2. Frame: the rounded window. Vertical frame is thin, lateral frame is visible. */
  --ix-frame-y:14px;
  --ix-frame-x:14px;
  --ix-frame-radius:24px;
  --ix-frame-top:max(var(--ix-frame-y),var(--ix-safe-top-static));
  --ix-frame-bottom:max(var(--ix-frame-y),var(--ix-safe-bottom-static));
  --ix-frame-left:max(var(--ix-frame-x),var(--ix-safe-left-static));
  --ix-frame-right:max(var(--ix-frame-x),var(--ix-safe-right-static));

  /* 3. Chrome: floating header (always) and floating dock (optional, .ix-dock). */
  --ix-chrome-gap:10px;
  --ix-header-h:68px;
  --ix-header-radius:20px;
  --ix-dock-h:0px;
  --ix-dock-radius:20px;

  /* 4. Occlusion bands and content clearance are derived on .ix-viewport (a
     custom property resolves where it is declared, so the dock override has to
     live on the same element).

     5. Keyboard-only VisualViewport offsets (0 unless the soft keyboard is open). */
  --ix-vv-top:0px;
  --ix-vv-bottom:0px;
}
*{box-sizing:border-box}
a{color:inherit}

/* ---- Stable viewport shell ------------------------------------------------
   The document never scrolls. html/body are locked; the canvas is 100lvh
   (fills behind translucent browser chrome) and the rounded window is 100svh
   (always fully visible). Both units are static: they do not change while the
   user scrolls, unlike vh-on-iOS, dvh, innerHeight or visualViewport.height. */
html:has(> body.ix-shell),html.ix-shell-root{
  height:100%;overflow:hidden;overscroll-behavior:none;
  background:var(--ix-browser-theme)!important;
}
body.ix-shell{
  position:fixed;inset:0;margin:0;width:100%;
  height:100lvh;min-height:100lvh;overflow:hidden;overscroll-behavior:none;
  background:var(--ix-browser-theme);color:var(--ix-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
/* Real fixed edge elements at the physical top/bottom: Safari samples them to
   tint its own (translucent) chrome. theme-color alone is not reliable. */
#ix-edge-top,#ix-edge-bottom{
  position:fixed!important;left:0!important;right:0!important;
  background:var(--ix-browser-theme)!important;z-index:2147483647!important;
  pointer-events:none!important;transform:translateZ(0);
}
#ix-edge-top{top:0!important;height:var(--ix-frame-top)!important}
#ix-edge-bottom{bottom:0!important;height:var(--ix-frame-bottom)!important}

/* The window. Everything the user sees lives inside it and is clipped by its
   rounded corners: scroller, header, dock and overlays. */
.ix-viewport{
  position:absolute;z-index:0;
  top:var(--ix-frame-top);left:var(--ix-frame-left);right:var(--ix-frame-right);
  height:calc(100svh - var(--ix-frame-top) - var(--ix-frame-bottom));
  border-radius:var(--ix-frame-radius);overflow:hidden;
  clip-path:inset(0 round var(--ix-frame-radius));
  background:var(--ix-bg);isolation:isolate;
  /* Occlusion bands: the filter that replaces a 90-degree cut. Content is fully
     transparent in the gap above the header and under its rounded corners,
     fades in over --ix-occlude-fade, and is fully visible (blurred by the glass)
     behind the rest of the header. The bottom band mirrors it for the dock. */
  --ix-occlude-fade:10px;
  --ix-occlude-top:calc(var(--ix-chrome-gap) + var(--ix-header-radius) - 2px);
  --ix-occlude-bottom:0px;
  /* Content clearance inside the scroller. */
  --ix-content-top:calc(var(--ix-chrome-gap) + var(--ix-header-h) + 18px);
  --ix-content-bottom:calc(var(--ix-chrome-gap) + var(--ix-dock-h) + 18px);
}
/* Hairline of the window, painted above content, header, dock and overlays. */
.ix-viewport::after{content:"";position:absolute;inset:0;z-index:3000;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(18,36,49,.11);pointer-events:none}
/* The single scroller. The occlusion mask lives here, so the header/dock glass
   samples already-faded content and nothing ever shows above the header or
   below the dock. Never put position:fixed elements inside the scroller. */
.ix-scroller{
  position:absolute;inset:0;z-index:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;overflow-anchor:none;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;
  padding-top:var(--ix-content-top);padding-bottom:var(--ix-content-bottom);
  scroll-padding-top:var(--ix-content-top);scroll-padding-bottom:var(--ix-content-bottom);
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,transparent var(--ix-occlude-top),
    #000 calc(var(--ix-occlude-top) + var(--ix-occlude-fade)),
    #000 calc(100% - var(--ix-occlude-bottom) - var(--ix-occlude-fade)),
    transparent calc(100% - var(--ix-occlude-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0,transparent var(--ix-occlude-top),
    #000 calc(var(--ix-occlude-top) + var(--ix-occlude-fade)),
    #000 calc(100% - var(--ix-occlude-bottom) - var(--ix-occlude-fade)),
    transparent calc(100% - var(--ix-occlude-bottom)),transparent 100%);
}
.ix-scroller::-webkit-scrollbar{display:none}
.ix-scroller:focus{outline:none}
/* A dock changes the bottom band: content stays visible behind the dock and
   above it, never in the strip between the dock and the frame. */
.ix-viewport:has(> .ix-dock),.ix-viewport.has-ix-dock{
  --ix-dock-h:64px;
  --ix-occlude-bottom:calc(var(--ix-chrome-gap) + var(--ix-dock-radius) - 2px);
}
/* Overlays (drawers, sheets, modals) are siblings of the scroller inside the
   window, so the rounded frame clips them too. */
.ix-overlay{position:absolute;inset:0;z-index:2000}

.ix-site{width:min(var(--ix-site-max),calc(100% - var(--ix-site-gutter)));margin:0 auto}.ix-page{min-width:0}

/* Floating glass header: outside the scroller, so its backdrop-filter blurs the
   content passing behind it. Never sticky, never document-fixed. */
.ix-topbar{
  position:absolute;z-index:1000;
  top:calc(var(--ix-chrome-gap) + var(--ix-vv-top));left:50%;transform:translateX(-50%);
  width:min(var(--ix-site-max),calc(100% - var(--ix-site-gutter)));height:var(--ix-header-h);margin:0;
  padding:0 18px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid rgba(17,20,18,.1);border-radius:var(--ix-header-radius);
  background:color-mix(in srgb,#fff 78%,transparent);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 10px 34px rgba(24,30,26,.07);
}
/* Optional floating dock (bottom chrome). Same glass rules as the header. */
.ix-dock{
  position:absolute;z-index:1000;
  bottom:var(--ix-chrome-gap);left:50%;transform:translateX(-50%);
  width:min(640px,calc(100% - var(--ix-site-gutter)));height:var(--ix-dock-h);
  padding:7px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  border-radius:var(--ix-dock-radius);
  background:color-mix(in srgb,var(--ix-ink) 92%,transparent);color:#fff;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  transition:opacity .18s ease,transform .18s ease;
}
.ix-dock a,.ix-dock button{appearance:none;border:0;background:transparent;color:inherit;border-radius:calc(var(--ix-dock-radius) - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;font:inherit;font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;opacity:.72}
.ix-dock .is-active,.ix-dock [aria-current="page"]{background:rgba(255,255,255,.12);opacity:1}
/* Soft keyboard open: the dock leaves, the header follows the visual viewport. */
.ix-keyboard-open .ix-dock{opacity:0;pointer-events:none;transform:translate(-50%,12px)}

.ix-wordmark{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-weight:900;letter-spacing:-.055em;min-width:0}.ix-wordmark-main{font-size:20px;font-weight:650;letter-spacing:-.8px;white-space:nowrap}.ix-wordmark-main b{color:var(--ix-accent)}.ix-wordmark-product{font-size:12px;font-weight:700;color:var(--ix-muted);letter-spacing:.01em;white-space:nowrap}.ix-nav{display:flex;align-items:center;gap:26px}.ix-nav a{text-decoration:none;font-size:13px;color:#4b514d}.ix-nav-actions{display:flex;align-items:center;gap:9px;margin-left:auto}.ix-nav-login{font-size:13px;font-weight:800;text-decoration:none}
.ix-btn{appearance:none;border:0;min-height:44px;border-radius:var(--ix-control-radius);padding:0 17px;background:var(--ix-ink);color:#fff;font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ix-btn:hover{transform:translateY(-1px)}.ix-btn-ghost{background:#ecece6;color:var(--ix-ink)}.ix-btn-accent{background:var(--ix-accent);color:#fff}.ix-btn-lg{min-height:52px;padding:0 22px;border-radius:15px}.ix-full{width:100%}
.ix-eyebrow{display:inline-block;font-size:11px;line-height:1.2;letter-spacing:.16em;font-weight:900;color:var(--ix-accent)}
.ix-auth-layout{width:min(1120px,calc(100% - 36px));min-height:calc(100svh - var(--ix-frame-top) - var(--ix-frame-bottom) - var(--ix-content-top) - var(--ix-content-bottom));margin:0 auto;padding:40px 0 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.ix-auth-story h1{font-size:clamp(50px,6.4vw,82px);line-height:.92;letter-spacing:-.075em;margin:16px 0 25px;font-weight:820}.ix-auth-story h1 em{font-style:normal;color:var(--ix-accent)}.ix-auth-story p{max-width:560px;font-size:18px;line-height:1.6;color:var(--ix-muted)}
.ix-auth-card{background:var(--ix-paper);border:1px solid var(--ix-line);border-radius:26px;padding:28px;box-shadow:var(--ix-shadow)}.ix-auth-card h2{font-size:30px;letter-spacing:-.045em;margin:8px 0 10px}.ix-auth-card>p{color:var(--ix-muted);line-height:1.55}.ix-social-btn{min-height:52px;border:1px solid var(--ix-line);background:#fff;color:var(--ix-ink);border-radius:14px;padding:0 16px;font-weight:800;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px}.ix-google-mark{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 20px}.ix-google-mark svg{display:block;width:20px;height:20px}.ix-auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ix-muted);font-size:11px}.ix-auth-divider::before,.ix-auth-divider::after{content:"";height:1px;background:var(--ix-line);flex:1}.ix-auth-divider span{white-space:nowrap}.ix-form{display:grid;gap:12px}.ix-field{display:grid;gap:7px}.ix-field label{font-size:11px;font-weight:850;color:#4d534e}.ix-field input,.ix-field select,.ix-field textarea{width:100%;min-width:0;border:1px solid var(--ix-line);background:#fff;border-radius:13px;padding:13px 14px;color:var(--ix-ink);outline:none;font:inherit}.ix-field input:focus,.ix-field select:focus,.ix-field textarea:focus{border-color:color-mix(in srgb,var(--ix-accent) 55%,#777);box-shadow:0 0 0 3px color-mix(in srgb,var(--ix-accent) 10%,transparent)}
.ix-otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.ix-otp-cell{min-width:0;height:52px;text-align:center;font-size:22px;font-weight:850;padding:0!important}.ix-auth-help{display:grid;gap:3px;margin-top:16px;color:var(--ix-muted);font-size:11px}.ix-auth-help b{color:var(--ix-ink)}
/* Page footer: in flow at the end of the scroller (it scrolls with content).
   Fixed bottom chrome is .ix-dock, not .ix-footer. */
.ix-footer{width:min(var(--ix-site-max),calc(100% - var(--ix-site-gutter)));margin:24px auto 0;padding:24px 0 6px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--ix-line);font-size:11px;color:var(--ix-muted)}.ix-footer a{text-decoration:none;font-weight:800;color:var(--ix-ink)}

@media(max-width:760px){
  :root{
    --ix-frame-y:5px;--ix-frame-x:10px;--ix-frame-radius:22px;
    --ix-chrome-gap:6px;--ix-header-h:58px;--ix-header-radius:18px;--ix-dock-radius:20px;
    --ix-site-gutter:24px;
  }
  .ix-topbar{width:calc(100% - 2 * var(--ix-chrome-gap));padding:0 10px 0 14px}
  .ix-dock{width:calc(100% - 2 * var(--ix-chrome-gap))}
  .ix-site,.ix-footer{width:calc(100% - 28px)}
  .ix-nav{display:none}.ix-wordmark-product{display:none}.ix-nav-actions{gap:6px}.ix-nav-actions .ix-btn{min-height:40px;padding:0 12px}.ix-nav-login{font-size:12px}
  .ix-auth-layout{width:calc(100% - 28px);min-height:auto;padding:24px 0 40px;grid-template-columns:1fr;gap:26px}.ix-auth-story h1{font-size:46px}.ix-auth-story p{font-size:16px}.ix-auth-card{padding:22px 18px;border-radius:22px}
  .ix-footer{align-items:flex-start;flex-direction:column}
  /* iOS zooms into inputs under 16px; the zoom shifts the whole frame. */
  body.ix-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),body.ix-shell select,body.ix-shell textarea{font-size:16px}
}
@media(max-width:390px){.ix-otp-boxes{gap:5px}.ix-otp-cell{height:48px;font-size:20px}}
@media(prefers-reduced-motion:reduce){.ix-scroller{scroll-behavior:auto}.ix-btn:hover{transform:none}.ix-dock{transition:none}}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
[data-ix-defer]{content-visibility:auto;contain-intrinsic-size:1px 700px}

/* Agenda-derived container entrance motion contract (v1.1.1). */
.ix-reveal{opacity:.08;filter:blur(14px);transform:translate3d(0,26px,0) scale(.965);transition:opacity .78s cubic-bezier(.16,1,.3,1),filter .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1);transition-delay:var(--ix-delay,0ms);will-change:opacity,filter,transform}
.ix-reveal.is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1);will-change:auto}
@media(prefers-reduced-motion:reduce){.ix-reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}}