/*
 * The home page, a shop for made-to-order families in two colours, the two of a blueprint:
 * a cobalt stage where the families are built, drawn over in white (dimensions, title block,
 * reference planes), and a white shop below it, where the customer sees what arrives and
 * orders. Blue is also the colour of every action; green only says "approved".
 * One typeface, Hubot Sans, along its width axis: condensed and heavy for headlines, normal
 * width for reading, narrow italic for dimensions (the ISO 3098 lettering of drawings).
 * Everything is scoped to .ini; the other screens keep styles.css until they are redesigned.
 */

body[data-tela="inicio"] { background: #FFFFFF; }
body[data-tela="inicio"] > .topo,
body[data-tela="inicio"] > .rodape { display: none; }
/* Until app.js has picked the screen, the shared header and footer could belong to the wrong one. */
html:not([data-pronto]) body > .topo,
html:not([data-pronto]) body > .rodape { visibility: hidden; }

.ini {
  /* The shop, on white. */
  --tinta: #0D1A3D;
  --tinta-2: #3A4868;
  --tinta-3: #5A6785;
  --linha: rgb(13 26 61 / 0.12);
  --linha-2: rgb(13 26 61 / 0.07);
  --gelo: #F3F6FD;
  /* Actions, and the stage. */
  --azul: #2450D8;
  --azul-forte: #1B3FB0;
  --azul-suave: #E8EEFD;
  --palco: #1A36A4;
  --palco-fundo: #0F2474;
  --palco-luz: #2848C2;
  /* Drawing on the stage: white lines, and a pale cyan for what is moving. */
  --sobre: #FFFFFF;
  --sobre-2: rgb(255 255 255 / 0.8);
  --sobre-3: rgb(255 255 255 / 0.6);
  --traco: rgb(255 255 255 / 0.85);
  --traco-fraco: rgb(255 255 255 / 0.22);
  --ciano: #A3DEFF;
  --ok: #138A55;
  --ok-claro: #8BE6B4;
  --aviso: #A4420E;
  --margem: clamp(20px, 4.4vw, 72px);
  /* The page's width. Past it the bands still run edge to edge and their content stays centred:
     --borda is the side padding of a band, and its 100% is the band's own width. */
  --largura: 1440px;
  --borda: max(var(--margem), calc((100% - var(--largura)) / 2));
  --coluna: min(620px, 46vw);
  --sai: cubic-bezier(0.16, 1, 0.3, 1);
  --flexiona: cubic-bezier(0.65, 0, 0.35, 1);
  font-family: 'Hubot Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
.ini ::selection { background: rgb(36 80 216 / 0.24); }
.ini :focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
.ini-palco :focus-visible, .ini-chamada :focus-visible { outline-color: var(--sobre); }
.ini-palco .ini-compositor :focus-visible { outline-color: var(--azul); }
.ini h1, .ini h2, .ini h3 { margin: 0; }
.ini svg { flex: none; }

/* Buttons that sell: blue on white, white on blue. */
.ini-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; background: var(--azul); color: #fff; font-weight: 640; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms, transform 160ms var(--sai), box-shadow 180ms;
  box-shadow: 0 12px 24px -12px rgb(36 80 216 / 0.7);
}
.ini-botao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--sai); }
.ini-botao:hover { background: var(--azul-forte); }
.ini-botao:hover svg { transform: translateX(3px); }
.ini-botao:active { transform: scale(0.97); }
.ini-botao-claro { background: #fff; color: var(--azul); box-shadow: 0 16px 32px -16px rgb(5 14 60 / 0.6); }
.ini-botao-claro:hover { background: var(--azul-suave); }

/* ---------------------------------------------------------------- header: white on the stage, ink on white */

.ini-topo {
  position: fixed; inset: 0 0 auto; z-index: 30; height: 72px; padding: 0 var(--borda);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--sobre);
  transition: background-color 300ms var(--sai), box-shadow 300ms var(--sai), color 300ms;
}
.ini-topo.rolou[data-sobre="azul"] { background: rgb(16 36 116 / 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--traco-fraco); }
.ini-topo[data-sobre="branco"] { color: var(--tinta); background: rgb(255 255 255 / 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--linha-2); }
/* The Moldea logo (marca.js): in colour on white, in negative on the blue; 32 px tall, the
   horizontal logo's minimum width is 120 px. Its tones are the logo's, not the interface's. */
.ini-marca { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.ini-marca-desenho { display: block; width: calc(32px * 1673.9 / 435.07); height: 32px; }
.ini-marca-desenho path { transition: fill 200ms ease-out; }
.ini-marca-desenho .m1 { fill: #012D80; }
.ini-marca-desenho .m2 { fill: #094CB3; }
.ini-marca-desenho .m3 { fill: #4995FB; }
/* In negative on every blue: the header over the stage and the account sheet's band. */
:is(.ini-topo:not([data-sobre="branco"]), .ini-conta-topo) .ini-marca-desenho .m1 { fill: #FFFFFF; }
:is(.ini-topo:not([data-sobre="branco"]), .ini-conta-topo) .ini-marca-desenho .m2 { fill: #C2D3FB; }
:is(.ini-topo:not([data-sobre="branco"]), .ini-conta-topo) .ini-marca-desenho .m3 { fill: #93ABF0; }
.ini-nav { display: flex; align-items: center; gap: 2px; }
.ini-nav a, .ini-nav button {
  min-height: 40px; padding: 0 13px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  display: inline-flex; align-items: center; color: inherit; opacity: 0.84; font: inherit; font-size: 0.95rem; font-weight: 540; text-decoration: none; white-space: nowrap;
  transition: opacity 150ms, background-color 150ms;
}
.ini-nav a:hover, .ini-nav button:hover { opacity: 1; background: rgb(127 140 170 / 0.16); }
.ini-nav .ini-cta-topo { margin-left: 8px; padding: 0 18px; opacity: 1; background: #fff; color: var(--azul); font-weight: 640; }
.ini-nav .ini-cta-topo:hover { background: var(--azul-suave); }
.ini-topo[data-sobre="branco"] .ini-cta-topo { background: var(--azul); color: #fff; }
.ini-topo[data-sobre="branco"] .ini-cta-topo:hover { background: var(--azul-forte); }
/* A signed-in account: its initials in a rounded square, cyan on the blue, blue on white. */
.ini-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ciano); color: var(--tinta); font-size: 0.78rem; font-weight: 760; letter-spacing: 0.02em; }
.ini-topo[data-sobre="branco"] .ini-avatar { background: var(--azul); color: #fff; }
.ini-nav .ini-painel-topo { gap: 9px; padding-left: 5px; opacity: 1; }
/* The balance, beside the account: a figure, as a dimension reads. */
.ini-nav .ini-saldo { font-weight: 640; font-variant-numeric: tabular-nums; opacity: 1; }
.ini-nav .ini-saldo[hidden] { display: none; }

/* ---------------------------------------------------------------- the stage: blue, the family stays while the page moves */

.ini-palco { position: relative; background: var(--palco); color: var(--sobre); }
.ini-cena-fixa {
  position: sticky; top: 0; z-index: 0; height: 100svh; pointer-events: none;
  /* A soft light where the family stands (--foco, set with the framing), darker towards the edges. */
  background: radial-gradient(ellipse 55% 60% at var(--foco, 74%) 48%, var(--palco-luz) 0%, var(--palco) 55%, var(--palco-fundo) 100%);
}
/* Behind it all, a structural grid in faint white lines (eixos.svg: axes and their bubbles, columns,
   dimensions), lighter still around the family so it stands clear. */
.ini-cena-fixa::before {
  content: ''; position: absolute; inset: 0; opacity: 0.1;
  background: url('eixos.svg') center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 26% 42% at var(--foco, 74%) 50%, rgb(0 0 0 / 0.25), #000 85%);
  mask-image: radial-gradient(ellipse 26% 42% at var(--foco, 74%) 50%, rgb(0 0 0 / 0.25), #000 85%);
}
.ini-cena { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--sai); }
.ini.com-cena .ini-cena { opacity: 1; }
/* Without the 3D scene the drawing of the family stays, alone on the stage. */
.ini.sem-cena .ini-cena, .ini.sem-cena .ini-vitrine { display: none; }
.ini.sem-cena .ini-cena-fixa:not(:has(.ini-contorno)) { display: none; }
/* While the scene loads, the first family drawn in hidden lines where it will stand
   (inicio.js); its parts land on it, and it fades once they all have. */
.ini-contorno {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  animation: ini-contorno-entra 1.1s var(--sai) 0.15s backwards; transition: opacity 800ms var(--sai);
}
.ini-contorno path { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ini-contorno.sai { opacity: 0; }
@keyframes ini-contorno-entra { from { opacity: 0; } }
.cena-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* White lines with a navy halo: they read on the blue and over a white family alike. */
.cena-cotas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2px rgb(8 24 90 / 0.9)); }
.cena-cotas path { fill: none; stroke: var(--traco); stroke-width: 1; stroke-linecap: round; }
.cena-cotas path.destaque { stroke: var(--ciano); stroke-width: 1.6; }
.cena-cotas path.conferida { stroke: var(--ok-claro); }
/* Packing for delivery: a dashed section box with Revit's arrows on its faces, faces that take
   their colour until the family is hidden, and the outline that flattens into the white card. */
.cena-cotas .embalagem path.caixa { stroke: var(--sobre); stroke-width: 1.2; stroke-dasharray: 6 4; }
.cena-cotas .embalagem path.alca { fill: var(--ciano); stroke: rgb(8 24 90 / 0.85); stroke-width: 1; stroke-linejoin: round; }
/* Solid at the end (cena.js fades their fill in), shaded as the key light falls: top, the face
   towards the light, the face away from it. */
.cena-cotas .embalagem .face { stroke: rgb(255 255 255 / 0.6); stroke-width: 1; stroke-linejoin: round; }
.cena-cotas .embalagem .face[data-lado="topo"] { fill: #EAF1FF; }
.cena-cotas .embalagem .face[data-lado="z"] { fill: #C2D3FB; }
.cena-cotas .embalagem .face[data-lado="x"] { fill: #93ABF0; }
.cena-cotas .embalagem .casca { fill: #fff; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.cena-cotas path.peca { stroke: rgb(255 255 255 / 0.55); }
.cena-cotas path.conector { stroke: var(--ciano); stroke-width: 1.3; stroke-linejoin: round; }
.cena-rotulos { position: absolute; inset: 0; }
.cota-rotulo, .peca-rotulo, .conector-rotulo {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  padding: 1px 6px 2px; border-radius: 3px; background: rgb(14 33 108 / 0.88); color: var(--sobre);
}
.cota-rotulo { font-size: 13px; font-style: italic; font-weight: 560; font-stretch: 78%; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; transition: color 300ms, background-color 300ms; }
.cota-rotulo.destaque { background: var(--ciano); color: var(--tinta); font-weight: 680; }
.cota-rotulo.conferida { background: var(--ok); color: #fff; }
.peca-rotulo { font-size: 14px; font-weight: 620; font-stretch: 90%; }
.conector-rotulo { font-size: 13px; font-style: italic; font-weight: 620; font-stretch: 78%; color: var(--ciano); }

/* The corner title block, drawn in white like the rest of the sheet: the family on screen,
   the order button for it, and a tab per trade. */
.ini-vitrine {
  position: absolute; right: var(--borda); bottom: clamp(24px, 5vh, 56px); z-index: 2; width: clamp(420px, 42vw, 500px);
  container: carimbo / inline-size;
  pointer-events: auto; border: 1.5px solid var(--traco); border-radius: 4px; color: var(--sobre);
  background: rgb(12 30 100 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 400ms var(--sai), transform 400ms var(--sai);
}
/* Hidden until the scene has a family to name, and while the steps below take over. */
.ini:not(.com-cena) .ini-vitrine, .ini.em-passo .ini-vitrine { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ini-vitrine-atual { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin: 0; padding: 12px 12px 12px 16px; }
.ini-vitrine-atual .disciplina { color: var(--ciano); font-size: 0.75rem; font-weight: 640; }
.ini-vitrine-atual .nome { grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1875rem; font-weight: 720; font-stretch: 86%; line-height: 1.25; }
.ini-vitrine-atual .tipos { grid-row: 3; color: var(--sobre-3); font-size: 0.8125rem; font-style: italic; font-stretch: 82%; white-space: nowrap; }
.ini-pedir-assim {
  grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px; background: #fff; color: var(--azul); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 660; white-space: nowrap;
  transition: background-color 160ms, transform 160ms var(--sai);
}
.ini-pedir-assim svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--sai); }
.ini-pedir-assim:hover { background: var(--azul-suave); }
.ini-pedir-assim:hover svg { transform: translateX(3px); }
.ini-pedir-assim:active { transform: scale(0.96); }
.ini-vitrine-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--traco-fraco); }
.ini-vitrine-lista li + li { border-left: 1px solid var(--traco-fraco); }
.ini-vitrine-lista button {
  position: relative; width: 100%; min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--sobre-3); font: inherit; font-size: 0.78rem; font-weight: 560; white-space: nowrap;
  transition: color 150ms, background-color 150ms;
}
.ini-vitrine-lista button:hover { color: var(--sobre); background: rgb(255 255 255 / 0.06); }
.ini-vitrine-lista button[aria-pressed="true"] { color: var(--sobre); font-weight: 660; }
/* How long until the next family: a pale rule that fills under the tab on screen. */
.ini-vitrine-lista i { position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px; background: var(--ciano); transform: scaleX(0); transform-origin: left; }
/* A narrow block keeps the name whole: smaller name, tabs and button; narrower still, the button
   goes under the name. */
@container carimbo (max-width: 470px) {
  .ini-vitrine-atual { column-gap: 12px; }
  .ini-vitrine-atual .nome { font-size: 1.0625rem; }
  .ini-pedir-assim { gap: 6px; padding: 0 13px; font-size: 0.85rem; }
  .ini-vitrine-lista button { font-size: 0.74rem; }
}
@container carimbo (max-width: 400px) {
  .ini-vitrine-atual { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ini-pedir-assim { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 10px; }
  /* Five trades in a phone's width: the narrow cut of the face, like the dimensions. */
  .ini-vitrine-lista button { padding: 0 2px; font-size: 0.72rem; font-stretch: 78%; }
}

/* ---------------------------------------------------------------- hero: the order */

.ini-heroi {
  position: relative; z-index: 1; margin-top: -100svh; min-height: 100svh;
  padding: 104px var(--borda) clamp(32px, 6vh, 64px);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
}
.ini-heroi-texto { max-width: max(var(--coluna), 640px); }
.ini h1 {
  font-size: clamp(3rem, 1.5rem + 3.9vw, 5.5rem); line-height: 0.93; font-weight: 800; font-stretch: 76%;
  letter-spacing: -0.028em; color: var(--sobre);
}
.ini h1 > span { display: block; }
.ini-sub { margin-top: 26px; max-width: 31em; font-size: clamp(1.0625rem, 0.96rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--sobre-2); text-wrap: pretty; }

/* The order form: a white sheet on the blue, written like a message. */
.ini-pedido { width: var(--coluna); }
.ini-compositor {
  position: relative; container: pedido / inline-size; border-radius: 30px; background: #fff; color: var(--tinta);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 30px 60px -28px rgb(4 12 52 / 0.7), 0 10px 20px -12px rgb(4 12 52 / 0.4);
  transition: box-shadow 220ms var(--sai);
}
.ini-compositor:focus-within { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.28), 0 30px 60px -28px rgb(4 12 52 / 0.7), 0 10px 20px -12px rgb(4 12 52 / 0.4); }
.ini-compositor textarea {
  display: block; width: 100%; min-height: 108px; max-height: 320px; resize: none; border: 0; outline: 0; background: transparent;
  padding: 22px 26px 6px; font: inherit; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta);
}
.ini-compositor textarea::placeholder { color: var(--tinta-3); }
/* The whole sheet shows the focus (its ring, above); an outline round the text alone would be cut by its corners. */
.ini-compositor textarea:focus-visible { outline: none; }
.ini-erro { padding: 0 26px 6px; color: var(--aviso); font-size: 0.925rem; }
.ini-erro:empty { display: none; }
.ini-pausa { padding: 0 26px 6px; color: var(--aviso); font-size: 0.925rem; }
/* The order asks for more than its level: a revision note, the drawing's delta beside why, and the
   two ways on (the level that covers it, or this level with what fits). */
.ini-triagem { display: flex; gap: 12px; margin: 2px 26px 10px; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--gelo); box-shadow: inset 2px 0 0 var(--aviso); }
.ini-triagem[hidden] { display: none; }
.ini-triagem .delta { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--aviso); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ini-triagem .motivo { color: var(--tinta); font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.ini-triagem .nota { margin-top: 2px; color: var(--tinta-2); font-size: 0.9rem; line-height: 1.45; }
.ini-triagem .acoes { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.ini-triagem button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 640; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.ini-triagem .mudar { background: var(--azul); color: #fff; }
.ini-triagem .mudar:hover { background: var(--azul-forte); }
.ini-triagem .manter { background: none; color: var(--tinta-2); }
.ini-triagem .manter:hover { background: rgb(13 26 61 / 0.06); color: var(--tinta); }
.ini-anexos { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 0; }
.ini-anexos:empty { display: none; }
.ini-anexo { display: inline-flex; align-items: center; gap: 8px; max-width: min(360px, 100%); padding: 6px 6px 6px 7px; border-radius: 14px; background: var(--gelo); font-size: 0.9rem; }
.ini-anexo .tipo { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--azul); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }
.ini-anexo .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-anexo small { display: block; color: var(--tinta-3); font-size: 0.78rem; }
.ini-anexo button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--tinta-3); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ini-anexo button:hover { background: rgb(13 26 61 / 0.08); color: var(--tinta); }
/* The pages of a long PDF, chosen on its chip as on a print dialog (RN-025). */
.ini-paginas { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--linha); color: var(--tinta-3); font-size: 0.8rem; }
.ini-paginas input { width: 6.5em; min-height: 30px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--tinta); font: inherit; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ini-paginas input:focus-visible { outline: 2px solid var(--azul); outline-offset: 0; border-color: transparent; }
.ini-anexo.invalida { box-shadow: inset 0 0 0 1.5px var(--aviso); }
.ini-anexo.invalida .ini-paginas input { border-color: var(--aviso); }

.ini-barra { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 12px; }
.ini-ferramenta {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  color: var(--tinta-2); font-size: 0.925rem; font-weight: 540; cursor: pointer; user-select: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.ini-ferramenta:hover { background: var(--gelo); color: var(--tinta); }
.ini-ferramenta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ini-ferramenta input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ini-ferramenta:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; }
.ini-espaco { flex: 1; }

/* The level of detail, as Revit's: the same pump drawn in blocks, with the form of its parts, with
   its finish and measured off the catalogue, over a chain of dimensions; the dimension of the
   chosen level is drawn in blue and slides to the next choice. Under it, what the level brings;
   for Compacta, the choice of parameters. */
.ini-nivel { display: grid; justify-items: start; padding: 4px 8px 0 12px; }
.ini-niveis { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-bottom: 10px; }
.ini-niveis::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: rgb(13 26 61 / 0.22); }
.ini-niveis label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: 12px; color: var(--tinta-3); font-size: 0.925rem; font-weight: 560; white-space: nowrap; cursor: pointer; user-select: none;
  transition: color 150ms ease-out;
}
/* The chain's ticks, the site's 45° slashes, at every boundary between levels. */
.ini-niveis label::before, .ini-niveis label:last-of-type::after {
  content: ''; position: absolute; left: -4px; bottom: -8px; width: 9px; height: 1px; background: rgb(13 26 61 / 0.32); transform: rotate(-45deg);
}
.ini-niveis label:last-of-type::after { left: auto; right: -4px; }
.ini-niveis input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ini-niveis svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: color 150ms ease-out; }
.ini-niveis label:hover { color: var(--tinta-2); }
.ini-niveis label:has(:checked) { color: var(--tinta); }
.ini-niveis label:has(:checked) svg { color: var(--azul); }
.ini-niveis label:has(:focus-visible) { outline: 2px solid var(--azul); outline-offset: -2px; }
.ini-niveis-cota {
  position: absolute; left: 0; bottom: 2px; width: 25%; height: 1.5px; background: var(--azul); pointer-events: none;
  transition: transform 320ms var(--sai);
}
.ini-niveis-cota::before, .ini-niveis-cota::after { content: ''; position: absolute; left: -4.5px; top: 0; width: 10px; height: 1.5px; background: var(--azul); transform: rotate(-45deg); }
.ini-niveis-cota::after { left: auto; right: -4.5px; }
.ini-niveis:has([value="completa"]:checked) .ini-niveis-cota { transform: translateX(100%); }
.ini-niveis:has([value="detalhada"]:checked) .ini-niveis-cota { transform: translateX(200%); }
.ini-niveis:has([value="lapidada"]:checked) .ini-niveis-cota { transform: translateX(300%); }

.ini-nivel-extra { display: grid; align-items: center; min-height: 44px; padding-left: 2px; }
.ini-nivel-extra > * {
  grid-area: 1 / 1; justify-self: start; opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity 150ms ease-out, transform 200ms ease-out, visibility 0s 200ms;
}
.ini-nivel:has([value="compacta"]:checked) [data-para="compacta"],
.ini-nivel:has([value="completa"]:checked) [data-para="completa"],
.ini-nivel:has([value="detalhada"]:checked) [data-para="detalhada"],
.ini-nivel:has([value="lapidada"]:checked) [data-para="lapidada"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ini-nivel-nota { color: var(--tinta-3); font-size: 0.875rem; white-space: nowrap; }
/* A plain checkbox: the option takes effect when the order is sent, not at the click. */
.ini-marcar {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; margin-left: -10px; border-radius: 12px;
  color: var(--tinta-2); font-size: 0.925rem; font-weight: 560; white-space: nowrap; cursor: pointer; user-select: none;
}
.ini-marcar:hover { color: var(--tinta); }
.ini-marcar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ini-marcar .caixa {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--tinta-3);
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ini-marcar:hover .caixa { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.ini-marcar .caixa svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 200ms ease-out; }
.ini-marcar input:checked + .caixa { background: var(--azul); box-shadow: inset 0 0 0 1.5px var(--azul); }
.ini-marcar input:checked + .caixa svg { stroke-dashoffset: 0; }
.ini-marcar input:focus-visible + .caixa { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Detalhada or Lapidada chosen: what the level adds is drawn in line by line, the drawing swells
   for a beat and the chain's blue dimension charges (pedido.js momentoDetalhada). */
.ini-niveis .detalhes path, .ini-plano .detalhes path { stroke-dasharray: 1; }
.ini-niveis label.potente svg, .ini-plano.potente h3 svg { animation: ini-pulso 900ms var(--sai); }
.ini-niveis label.potente .detalhes path, .ini-plano.potente .detalhes path { animation: ini-traca 640ms var(--sai) backwards; }
.potente .detalhes path:nth-child(2) { animation-delay: 55ms; }
.potente .detalhes path:nth-child(3) { animation-delay: 110ms; }
.potente .detalhes path:nth-child(4) { animation-delay: 165ms; }
.potente .detalhes path:nth-child(5) { animation-delay: 220ms; }
.potente .detalhes path:nth-child(6) { animation-delay: 275ms; }
.potente .detalhes path:nth-child(7) { animation-delay: 330ms; }
.potente .detalhes path:nth-child(8) { animation-delay: 385ms; }
.potente .detalhes path:nth-child(9) { animation-delay: 440ms; }
.potente .detalhes path:nth-child(10) { animation-delay: 495ms; }
.ini-niveis.potente .ini-niveis-cota { animation: ini-carga 1100ms ease-out; }
@keyframes ini-traca { from { stroke-dashoffset: 1; } }
@keyframes ini-pulso { 35% { transform: scale(1.18); filter: drop-shadow(0 0 5px rgb(36 80 216 / 0.5)); } }
@keyframes ini-carga { 20% { box-shadow: 0 0 10px 2px rgb(36 80 216 / 0.55); } 100% { box-shadow: 0 0 0 0 rgb(36 80 216 / 0); } }

/* A price in credits whose digits roll to the next value; to Detalhada they overshoot a little and settle. */
.ini-preco { display: inline-flex; align-items: flex-start; gap: 0.16em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ini-preco .unidade { align-self: flex-end; margin: 0 0 0.12em 0.2em; font-size: 0.42em; font-weight: 620; font-stretch: 92%; letter-spacing: 0; opacity: 0.62; }
.ini-preco .digitos { display: inline-flex; }
.ini-preco .digito {
  width: 1ch; height: 1.1em; overflow: hidden; transition: width 450ms var(--sai);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.ini-preco .digito.vazio { width: 0; }
.ini-preco .fita { display: flex; flex-direction: column; line-height: 1.1; transform: translateY(calc(var(--d, 0) * -1.1em)); transition: transform 520ms var(--sai); }
.ini-preco.forte .fita { transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.3, 1.45, 0.55, 1); }
.ini-preco.forte .digito { transition-duration: 700ms; }

/* The order's price, beside its button: it follows the level. */
.ini-total { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0 14px 0 8px; }
.ini-total .ini-preco { font-size: 1.5rem; font-weight: 740; font-stretch: 82%; letter-spacing: -0.01em; color: var(--tinta); }
.ini-total .ini-preco.forte { animation: ini-preco-forte 1200ms ease-out; }
.ini-total .por { color: var(--tinta-3); font-size: 0.75rem; line-height: 1; white-space: nowrap; }
@keyframes ini-preco-forte { 30% { color: var(--azul); } }

.ini-enviar {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 22px; border: 0; border-radius: 999px;
  background: var(--azul); color: #fff; cursor: pointer; overflow: hidden; font: inherit; font-size: 1rem; font-weight: 660; white-space: nowrap;
  transition: transform 160ms var(--sai), background-color 200ms;
}
.ini-enviar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--sai); }
.ini-enviar:hover { background: var(--azul-forte); }
.ini-enviar:hover svg { transform: translateX(3px); }
.ini-enviar:active { transform: scale(0.96); }
.ini-enviar[disabled] { background: rgb(13 26 61 / 0.35); cursor: progress; }
.enviando .ini-enviar svg { animation: ini-envia 0.9s var(--flexiona) infinite; }
@keyframes ini-envia {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(14px); opacity: 0; }
  55% { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* A narrow order box: the tools drop their second word; narrower still, the order button gets a
   row of its own, full width, under them. */
@container pedido (max-width: 540px) {
  .ini-extra { display: none; }
}
/* Four levels across a box narrower than their names in a row: each drawing over its name. */
@container pedido (max-width: 600px) {
  .ini-nivel { padding-right: 12px; }
  .ini-niveis { justify-self: stretch; }
  .ini-niveis label { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 4px 4px; font-size: 0.875rem; }
}
@container pedido (max-width: 420px) {
  .ini-total { margin-left: auto; }
  /* Phones: each level's drawing over its name, the three across the box. */
  .ini-nivel { padding-right: 12px; }
  .ini-niveis { justify-self: stretch; }
  .ini-niveis label { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 4px 4px; font-size: 0.875rem; }
  .ini-barra { flex-wrap: wrap; row-gap: 6px; }
  .ini-espaco { display: none; }
  .ini-enviar { width: 100%; justify-content: center; }
  /* The note's two ways on, one under the other, as wide as the note: a price never runs out of it. */
  .ini-triagem { margin: 2px 12px 10px; }
  .ini-triagem .acoes { margin-left: -34px; }
  .ini-triagem button { flex: 1 1 100%; padding: 8px 16px; white-space: normal; line-height: 1.3; }
}
.ini-progresso { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; }
.ini-progresso[hidden] { display: none; }
.ini-progresso span { display: block; height: 100%; width: var(--progresso, 0%); background: var(--azul); transition: width 160ms; }

/* What the customer can count on, right under the order. */
.ini-garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0 0 0 10px; list-style: none; color: var(--sobre-2); font-size: 0.925rem; }
.ini-garantias li { display: inline-flex; align-items: center; gap: 7px; }
.ini-garantias svg { width: 17px; height: 17px; fill: none; stroke: var(--ok-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- from order to .rfa, on the stage */

.ini-processo { position: relative; z-index: 1; padding: 18vh var(--borda) 22vh; }
.ini-processo > * { max-width: min(560px, 42vw); }
.ini-processo h2 { margin-bottom: 12vh; font-size: clamp(2.5rem, 1.3rem + 3vw, 4.25rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.026em; line-height: 0.95; color: var(--sobre); }
/* The steps hang from a rail drawn like a chain of dimensions; it fills as the reader goes down. */
.ini-passos-quadro { position: relative; padding-left: 40px; }
.ini-trilho { position: absolute; left: 6px; top: 0.7em; bottom: 0; width: 1px; background: var(--traco-fraco); }
.ini-trilho span { position: absolute; inset: 0; background: var(--ciano); transform-origin: top; transform: scaleY(0); }
.ini-passos { margin: 0; padding: 0; list-style: none; }
.ini-passos li { min-height: 52vh; padding-bottom: 8vh; opacity: 0.34; transition: opacity 500ms var(--sai); }
.ini-passos li.ativo { opacity: 1; }
.ini-passo { position: relative; }
.ini-passo::before { content: ''; position: absolute; left: -40px; top: 0.7em; width: 13px; height: 13px; border-top: 1px solid var(--sobre); transform: translate(0, -0.5px); }
.ini-passo::after { content: ''; position: absolute; left: -38px; top: calc(0.7em - 4.5px); width: 9px; height: 1px; background: var(--sobre); transform: rotate(-45deg); }
.ini-passos li.ativo .ini-passo::before, .ini-passos li.ativo .ini-passo::after { border-color: var(--ciano); background-color: var(--ciano); }
/* Wide screens with motion: the last step is long, its text held on screen while the family is
   packed beside it (inicio.js, "packed and delivered"). */
.ini.com-embalagem .ini-passos li:last-child { min-height: 130vh; }
.ini.com-embalagem .ini-passos li:last-child .ini-passo { position: sticky; top: 36vh; }
.ini-passos h3 { margin-bottom: 14px; font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem); font-weight: 720; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1.05; color: var(--sobre); }
.ini-passos p { max-width: 34em; font-size: 1.125rem; line-height: 1.55; color: var(--sobre-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- what arrives, on white */

.ini-entrega {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 96px); align-items: center;
  padding: clamp(96px, 13vh, 168px) var(--borda) clamp(72px, 9vh, 120px); background: #fff;
}
.ini-entrega h2, .ini-duvidas h2 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.026em; line-height: 0.98; color: var(--tinta); }
.ini-entrega-texto { container: entrega / inline-size; }
.ini-entrega-texto > p { margin-top: 20px; max-width: 34em; font-size: 1.125rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.ini-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 44px 0 0; padding: 0; list-style: none; }
.ini-itens li { display: flex; gap: 14px; align-items: flex-start; }
.ini-itens svg { width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ini-itens strong { display: block; font-size: 1.0625rem; font-weight: 680; color: var(--tinta); }
.ini-itens span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
/* Two items a row only while each has room for a sentence a line. */
@container entrega (max-width: 560px) {
  .ini-itens { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* The delivery: what the order page hands over at the end, for the family on the stage. */
.ini-pacote {
  border-radius: 24px; background: #fff; padding: 24px;
  box-shadow: 0 0 0 1px var(--linha), 0 40px 80px -40px rgb(19 44 138 / 0.4), 0 12px 24px -16px rgb(13 26 61 / 0.18);
}
.ini-pacote-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ini-pacote-selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgb(19 138 85 / 0.1); color: var(--ok); font-size: 0.85rem; font-weight: 660; }
.ini-pacote-selo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ini-pacote-exemplo { color: var(--tinta-3); font-size: 0.8125rem; }
.ini-pacote-nome { margin-top: 18px !important; font-size: 1.75rem; font-weight: 760; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1.1; color: var(--tinta); }
.ini-pacote-tipos { margin-top: 4px; color: var(--tinta-3); font-size: 0.95rem; }
.ini-pacote-arquivos { margin: 20px 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--linha-2); }
.ini-pacote-arquivos li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--linha-2); }
.ini-pacote-arquivos svg { width: 22px; height: 22px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ini-pacote-arquivos .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tinta); }
.ini-pacote-arquivos .nota { color: var(--tinta-3); font-size: 0.875rem; white-space: nowrap; }
.ini-pacote .ini-botao { width: 100%; }
/* The same card, flying from the stage into this section; placed by inicio.js. */
.ini-pacote.viajante {
  position: fixed; left: 0; top: 0; z-index: 25; margin: 0; visibility: hidden; opacity: 0;
  transform-origin: 0 0; pointer-events: none; will-change: transform, opacity;
}

/* ---------------------------------------------------------------- questions, on white */

/* ---------------------------------------------------------------- the levels side by side
   The same pump ordered at each level, in the order page's 3D stage: the levels over the same
   chain of dimensions as the order box, the types and views as on the order page, and in the
   stage's corner a title block of the level on show. */
.ini-lado {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 28px clamp(40px, 5vw, 88px); align-items: start;
  padding: clamp(56px, 8vh, 104px) var(--borda) clamp(48px, 6vh, 88px); background: #fff;
}
.ini-lado h2 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.026em; line-height: 0.98; color: var(--tinta); text-wrap: balance; }
.ini-lado-texto { position: sticky; top: 112px; }
.ini-lado-texto > p { margin-top: 20px; max-width: 30em; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.ini-lado-nota { min-height: 4.65em; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linha-2); color: var(--tinta-2); font-size: 0.975rem; line-height: 1.55; text-wrap: pretty; }
.ini-lado-nota strong { display: block; margin-bottom: 4px; color: var(--tinta); font-weight: 680; }
.ini-lado-quadro { min-width: 0; }
.ini-lado-escolha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.ini-lado-niveis { flex: 1 1 420px; max-width: 560px; }
.ini-lado .prj-modelo-tipos { margin-top: 0; }
/* Taller than the order page's: the pump stands upright. (Two classes: pedidos.css comes later.) */
.ini-lado .ini-lado-palco { aspect-ratio: 5 / 4; max-height: calc(100svh - 190px); margin-top: 16px; }
.ini-lado-palco:not(.pronto)::after {
  content: 'Carregando o modelo…'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--sobre-3); font-size: 0.875rem;
}
/* A swipe up the page scrolls it; a sideways drag turns the family. */
.ini-lado .prj-modelo-tela { touch-action: pan-y; }
.ini-lado-carimbo {
  position: absolute; top: 14px; left: 14px; z-index: 1; display: grid; grid-template-columns: auto auto; margin: 0;
  border: 1.5px solid var(--traco); border-radius: 4px; color: var(--sobre); background: rgb(12 30 100 / 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8125rem; pointer-events: none;
}
.ini-lado-carimbo > div { display: contents; }
.ini-lado-carimbo dt, .ini-lado-carimbo dd { margin: 0; padding: 5px 12px; border-bottom: 1px solid var(--traco-fraco); }
.ini-lado-carimbo > div:last-child :is(dt, dd) { border-bottom: 0; }
.ini-lado-carimbo dt { color: var(--sobre-3); font-style: italic; font-stretch: 82%; border-right: 1px solid var(--traco-fraco); }
.ini-lado-carimbo dd { font-weight: 660; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .ini-lado { grid-template-columns: minmax(0, 1fr); }
  .ini-lado-texto { position: static; }
  .ini-lado-nota { min-height: 0; }
  .ini-lado .ini-lado-palco { aspect-ratio: 4 / 5; max-height: 78svh; }
}
@media (max-width: 640px) {
  .ini-lado-niveis label { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 4px 4px; font-size: 0.875rem; }
  .ini-lado-carimbo { top: 10px; left: 10px; font-size: 0.75rem; }
}

/* ---------------------------------------------------------------- prices
   A schedule of types, one column per level, under one frame; Lapidada stands out on the blue
   of the stage instead of standing taller. Four across on wide screens, two by two below. */
.ini-precos { padding: clamp(56px, 8vh, 104px) var(--borda) clamp(48px, 6vh, 88px); background: #fff; }
.ini-precos-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; }
.ini-precos h2 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.026em; line-height: 0.98; color: var(--tinta); }
.ini-precos-texto p { max-width: 36em; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.ini-planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vh, 64px); border: 1px solid var(--linha); border-radius: 8px; }
.ini-plano { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 34px clamp(20px, 2.4vw, 36px) 30px; }
.ini-plano + .ini-plano { border-left: 1px solid var(--linha); }
.ini-plano h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3125rem; font-weight: 720; letter-spacing: -0.01em; color: var(--tinta); }
.ini-plano h3 svg { width: 40px; height: 40px; fill: none; stroke: var(--azul); stroke-width: 0.95; stroke-linecap: round; stroke-linejoin: round; }
.ini-plano-preco { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 10px; margin-top: 4px; }
.ini-plano-preco .ini-preco { font-size: clamp(2.75rem, 1.9rem + 1.6vw, 3.75rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.02em; color: var(--tinta); }
.ini-plano-preco .por { padding-bottom: 0.45em; color: var(--tinta-3); font-size: 0.9rem; white-space: nowrap; }
.ini-plano .ini-marcar { align-self: flex-start; min-height: 40px; margin: -6px 0 -6px -10px; }
.ini-plano .ini-marcar .mais { margin-left: 4px; color: var(--tinta-3); font-weight: 520; font-variant-numeric: tabular-nums; }
.ini-plano-resumo { color: var(--tinta-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.ini-plano ul { display: grid; gap: 11px; margin: 4px 0 10px; padding: 18px 0 0; border-top: 1px solid var(--linha-2); list-style: none; }
.ini-plano li { display: flex; gap: 10px; align-items: flex-start; color: var(--tinta-2); font-size: 0.95rem; line-height: 1.45; }
.ini-plano li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ini-plano-prazo { margin: -6px 0 8px; color: var(--tinta-3); font-size: 0.875rem; }
.ini-plano .ini-botao { align-self: stretch; margin-top: auto; }
/* An outlined button for the white columns: the filled blue stays for the order and for Lapidada. */
.ini-botao-linha { background: #fff; color: var(--azul); box-shadow: inset 0 0 0 1.5px rgb(36 80 216 / 0.38); }
.ini-botao-linha:hover { background: var(--azul-suave); }
.ini-plano[data-plano="lapidada"] {
  margin: -14px -1px -14px 0; padding-top: 52px; padding-bottom: 44px; border-radius: 8px; border-left: 0;
  background: var(--palco); color: var(--sobre); box-shadow: 0 32px 64px -32px rgb(10 26 100 / 0.65);
}
/* The stage's faint grid behind it. */
.ini-plano[data-plano="lapidada"]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url('eixos.svg') center top / cover no-repeat; opacity: 0.1; }
.ini-plano[data-plano="lapidada"] h3, .ini-plano[data-plano="lapidada"] .ini-preco { color: var(--sobre); }
.ini-plano[data-plano="lapidada"] h3 svg { stroke: var(--ciano); }
.ini-plano[data-plano="lapidada"] :is(.por, .ini-plano-resumo, li) { color: var(--sobre-2); }
.ini-plano[data-plano="lapidada"] .ini-plano-prazo { color: var(--sobre-3); }
.ini-plano[data-plano="lapidada"] ul { border-top-color: var(--traco-fraco); }
.ini-plano[data-plano="lapidada"] li svg { stroke: var(--ok-claro); }
.ini-plano[data-plano="lapidada"] :focus-visible { outline-color: var(--sobre); }
.ini-plano-marca { position: absolute; top: 16px; left: clamp(20px, 2.4vw, 36px); margin: 0; padding: 3px 8px; border-radius: 3px; background: var(--ciano); color: var(--tinta); font-size: 0.75rem; font-weight: 700; }

@media (min-width: 961px) and (max-width: 1279px) {
  .ini-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ini-plano:nth-child(3) { border-left: 0; }
  .ini-plano:nth-child(n + 3) { border-top: 1px solid var(--linha); }
  .ini-plano[data-plano="lapidada"] { margin: 0 -1px -1px 0; border-top: 0; }
}

/* The packages of credits, under the prices: shown, bought once the site takes payments. */
.ini-pacotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 6vh, 56px); padding: 26px clamp(20px, 2.4vw, 36px); border: 1px solid var(--linha); border-radius: 8px; }
.ini-pacotes h3 { font-size: 1.3125rem; font-weight: 720; letter-spacing: -0.01em; color: var(--tinta); }
.ini-pacotes-texto p { margin-top: 6px; color: var(--tinta-2); line-height: 1.5; }
.ini-pacotes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ini-pacotes li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 8px; background: var(--gelo); }
.ini-pacotes li strong { color: var(--tinta); font-size: 1.125rem; font-weight: 740; }
.ini-pacotes li span { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ini-pacotes li em { color: var(--tinta-3); font-size: 0.85rem; font-style: normal; }
.ini-pacotes-nota { grid-column: 1 / -1; margin: 0; color: var(--tinta-3); font-size: 0.875rem; }
@media (max-width: 960px) { .ini-pacotes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ini-pacotes ul { grid-template-columns: minmax(0, 1fr); } }

.ini-duvidas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); padding: clamp(40px, 5vh, 72px) var(--borda) clamp(96px, 13vh, 168px); background: #fff; }
.ini-duvidas-lista { border-top: 1px solid var(--linha); }
.ini-duvidas details { border-bottom: 1px solid var(--linha); }
.ini-duvidas summary {
  position: relative; display: block; padding: 22px 48px 22px 0; cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 640; color: var(--tinta); transition: color 150ms;
}
.ini-duvidas summary::-webkit-details-marker { display: none; }
.ini-duvidas summary:hover { color: var(--azul); }
/* A plus that turns into a minus. */
.ini-duvidas summary::before, .ini-duvidas summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.8px; border-radius: 2px; background: var(--azul); transition: transform 300ms var(--sai); }
.ini-duvidas summary::after { transform: rotate(90deg); }
.ini-duvidas details[open] summary::after { transform: rotate(0deg); }
.ini-duvidas details p { max-width: 60ch; margin: -4px 0 0; padding: 0 48px 24px 0; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }

/* ---------------------------------------------------------------- the call to order, back on blue */

.ini-chamada {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding: clamp(96px, 13vh, 168px) var(--borda); color: var(--sobre);
  background: radial-gradient(ellipse 70% 120% at 85% 100%, var(--palco-luz) 0%, var(--palco) 50%, var(--palco-fundo) 100%);
}
.ini-chamada h2 { max-width: 15em; font-size: clamp(2.25rem, 1.2rem + 3vw, 4.25rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.026em; line-height: 0.98; color: var(--sobre); }

/* ---------------------------------------------------------------- footer */

.ini-rodape {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding: 32px var(--borda) 40px; background: #fff; color: var(--tinta-3); font-size: 0.925rem;
}
.ini-rodape .ini-marca { color: var(--tinta); }
.ini-rodape p { flex: 1; margin: 0; }
.ini-rodape a:not(.ini-marca), .ini-rodape-sair { color: var(--tinta-2); font-weight: 540; text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 5px; }
.ini-rodape-sair { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- the account: a sheet from the right
   Signing in and creating an account (a preview, nothing behind it yet). It slides in over the
   dimmed page and leaves the same way; without @starting-style it simply appears. */
.ini-conta {
  position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #fff; color: var(--tinta); overflow: auto; overscroll-behavior: contain; box-shadow: -32px 0 80px -32px rgb(8 20 76 / 0.55);
  translate: 0 0; transition: translate 420ms var(--sai), overlay 420ms allow-discrete, display 420ms allow-discrete;
}
.ini-conta:not([open]) { translate: 100% 0; }
.ini-conta::backdrop { background: rgb(8 20 76 / 0.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity 420ms var(--sai), overlay 420ms allow-discrete, display 420ms allow-discrete; }
.ini-conta:not([open])::backdrop { opacity: 0; }
@starting-style {
  .ini-conta[open] { translate: 100% 0; }
  .ini-conta[open]::backdrop { opacity: 0; }
}
.ini-conta-corpo { display: flex; flex-direction: column; min-height: 100%; }
.ini-conta-topo { position: relative; isolation: isolate; padding: 26px 32px 32px; background: var(--palco); color: var(--sobre); }
.ini-conta-topo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('eixos.svg') left top / cover no-repeat; opacity: 0.1; }
.ini-conta-fechar {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: none; color: var(--sobre); cursor: pointer; transition: background-color 150ms ease-out;
}
.ini-conta-fechar:hover { background: rgb(255 255 255 / 0.12); }
.ini-conta-fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ini-conta-topo h2 { margin-top: 40px; font-size: 2.25rem; font-weight: 800; font-stretch: 76%; letter-spacing: -0.02em; line-height: 1; color: var(--sobre); }
.ini-conta-topo p { max-width: 30em; margin-top: 12px; color: var(--sobre-2); font-size: 0.975rem; line-height: 1.5; text-wrap: pretty; }
.ini-conta :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ini-conta-topo :focus-visible { outline-color: var(--sobre); }
/* The two ways in over a chain of dimensions, as the order's levels. */
.ini-conta-abas { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); margin: 22px 32px 0; padding-bottom: 10px; }
.ini-conta-abas::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: rgb(13 26 61 / 0.22); }
.ini-conta-abas [role="tab"] {
  min-height: 44px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--tinta-3); font: inherit; font-size: 1rem; font-weight: 620; transition: color 150ms ease-out;
}
.ini-conta-abas [role="tab"]:hover { color: var(--tinta-2); }
.ini-conta-abas [role="tab"][aria-selected="true"] { color: var(--tinta); }
.ini-conta-cota { position: absolute; left: 0; bottom: 2px; width: 50%; height: 1.5px; background: var(--azul); transition: transform 320ms var(--sai); }
.ini-conta-cota::before, .ini-conta-cota::after { content: ''; position: absolute; left: -4.5px; top: 0; width: 10px; height: 1.5px; background: var(--azul); transform: rotate(-45deg); }
.ini-conta-cota::after { left: auto; right: -4.5px; }
.ini-conta[data-aba="criar"] .ini-conta-cota { transform: translateX(100%); }
.ini-conta-form { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px 40px; }
.ini-conta-form[hidden] { display: none; }
.ini-conta-abas[hidden] { display: none; }
.ini-campo { display: flex; flex-direction: column; gap: 7px; }
.ini-campo > label { color: var(--tinta); font-size: 0.9rem; font-weight: 620; }
.ini-campo input:is([type="email"], [type="text"], [type="password"]) {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid #7D8A9D; border-radius: 12px; background: #fff;
  color: var(--tinta); font: inherit; font-size: 1rem; transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ini-campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(36 80 216 / 0.18); }
.ini-campo input[aria-invalid="true"] { border-color: var(--aviso); }
.ini-campo input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(164 66 14 / 0.16); }
/* The eye sits inside the field, at its end; struck through while the password shows. */
.ini-campo-senha { position: relative; }
.ini-campo-senha input { padding-right: 52px; }
.ini-campo-senha button {
  position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: none; color: var(--tinta-3); cursor: pointer; transition: color 150ms ease-out;
}
.ini-campo-senha button:hover { color: var(--tinta); }
.ini-campo-senha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ini-campo-senha button[aria-pressed="false"] .risco { display: none; }
.ini-campo-dica { color: var(--tinta-3); font-size: 0.85rem; }
.ini-campo-erro { color: var(--aviso); font-size: 0.85rem; }
.ini-campo-erro:empty { display: none; }
.ini-campo .ini-marcar { align-self: flex-start; }
.ini-conta-link {
  align-self: flex-start; min-height: 36px; margin-top: -10px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--azul); font: inherit; font-size: 0.9rem; font-weight: 560; text-decoration: underline; text-decoration-color: rgb(36 80 216 / 0.35); text-underline-offset: 4px;
}
.ini-conta-form .ini-botao { width: 100%; margin-top: 4px; border: 0; cursor: pointer; font: inherit; font-size: 1.0625rem; font-weight: 640; }
.ini-conta-form.enviando .ini-botao svg { animation: ini-envia 0.9s var(--flexiona) infinite; }
.ini-conta-aviso { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--azul-suave); color: var(--tinta); font-size: 0.925rem; line-height: 1.5; }
.ini-conta-aviso:empty { display: none; }
.ini-conta-aviso a { color: var(--azul); font-weight: 620; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1180px) {
  .ini-nav .ancora { display: none; }
}
@media (max-width: 959px) {
  .ini { --coluna: 100%; }
  .ini-palco { display: flex; flex-direction: column; }
  .ini-heroi { order: 0; margin-top: 0; min-height: 0; padding-top: 104px; padding-bottom: 0; gap: 32px; }
  .ini-cena-fixa { order: 1; position: relative; height: min(76svh, 720px); margin-top: 8px; background: radial-gradient(ellipse 80% 60% at 50% 50%, var(--palco-luz) 0%, var(--palco) 60%, var(--palco) 100%); }
  .ini-cena-fixa::before {
    -webkit-mask-image: radial-gradient(ellipse 40% 34% at 50% 50%, rgb(0 0 0 / 0.25), #000 85%);
    mask-image: radial-gradient(ellipse 40% 34% at 50% 50%, rgb(0 0 0 / 0.25), #000 85%);
  }
  .ini-vitrine { left: var(--margem); right: var(--margem); bottom: 8px; width: auto; }
  .ini-processo { order: 2; padding-top: 10vh; }
  .ini-processo > * { max-width: 100%; }
  .ini-processo h2 { margin-bottom: 40px; }
  .ini-passos li { min-height: 0; padding-bottom: 44px; opacity: 1; }
  .ini-entrega, .ini-duvidas { grid-template-columns: minmax(0, 1fr); }
  /* The prices one under the other, Lapidada last, its blue reaching the frame. */
  .ini-precos-texto, .ini-planos { grid-template-columns: minmax(0, 1fr); }
  .ini-plano + .ini-plano { border-left: 0; border-top: 1px solid var(--linha); }
  .ini-plano[data-plano="lapidada"] { margin: 0 -1px -1px; border-top: 0; }
}
@media (max-width: 640px) {
  .ini-nav .ini-cta-topo { display: none; }
}
@media (max-width: 520px) {
  .ini-topo { height: 64px; }
  /* The brand, "Meus pedidos" and "Entrar" on one line. */
  .ini-topo { gap: 10px; }
  .ini-nav a, .ini-nav button { padding: 0 9px; }
  .ini-compositor { border-radius: 24px; }
  /* Four lines: the example in the placeholder fits without a scroll bar. */
  .ini-compositor textarea { min-height: 136px; padding: 18px 20px 6px; }
}
@media (max-width: 360px) {
  /* The M alone: the box crops the wordmark (xMinYMid slice). */
  .ini-marca-desenho { width: calc(32px * 455.59 / 435.07); }
}

@media (prefers-reduced-motion: reduce) {
  .ini *, .ini *::before, .ini *::after { transition-duration: 0ms !important; animation: none !important; }
}