/* NOI Branding Boutique · estilos
   Orden del archivo: 1) tokens  2) base y tipografía  3) cabecera  4) rejilla y secciones
   5) bloques (texto, imagen, botón, formulario)  6) pie  7) diseño de cada página (al final).
   Para cambiar colores o tipografías toca solo los tokens del apartado 1. */

/* ---------- 1) TOKENS ---------- */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* colores de la marca */
  --crema: hsl(55, 35.29%, 93.33%);
  --verde: hsl(120, 16.46%, 15.49%);
  --lima: hsl(67.39, 95.83%, 71.76%);
  --salvia: hsl(111.43, 14.29%, 71.18%);

  /* tipografías (títulos / texto / etiquetas) */
  --f-titulo: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* medidas de página */
  --pagina: 4vw;           /* margen lateral en escritorio */
  --pagina-movil: 6vw;     /* margen lateral en móvil */
  --ancho-max: 1800px;
  --alto-cabecera: calc(12vw + 37px);  /* móvil: 6vw arriba y abajo + botón de 37px */

  /* escala de tamaños: móvil. (valor - 1) * paso + 1rem, con 1rem = 15px */
  --paso: calc(0.012 * min(100vh, 900px));
  --t-normal: calc(0.5 * var(--paso) + 1rem);
  --t-pequeno: calc(-0.04 * var(--paso) + 1rem);
  --t-nav: calc(-0.1 * var(--paso) + 1rem);
  --t-grande: calc(0.1 * var(--paso) + 1rem);
  --t-h4: 1rem;
  --t-h3: calc(1 * var(--paso) + 1rem);
  --t-h2: calc(2.5 * var(--paso) + 1rem);
  --t-h1: calc(8.3 * var(--paso) + 1rem);
}
@media (min-width: 768px) {
  :root {
    /* escritorio: min(valor-1 * 1,2vw + 1rem, max(valor-1 * 21,6px + 1rem, valor * 1rem)) */
    --t-normal: min(calc(0.5 * 1.2vw + 1rem), max(calc(0.5 * 21.6px + 1rem), calc(1.5 * 1rem)));
    --t-pequeno: min(calc(-0.04 * 1.2vw + 1rem), max(calc(-0.04 * 21.6px + 1rem), calc(0.96 * 1rem)));
    --t-nav: min(calc(-0.1 * 1.2vw + 1rem), max(calc(-0.1 * 21.6px + 1rem), calc(0.9 * 1rem)));
    --t-grande: min(calc(0.1 * 1.2vw + 1rem), max(calc(0.1 * 21.6px + 1rem), calc(1.1 * 1rem)));
    --t-h3: min(calc(1 * 1.2vw + 1rem), max(calc(1 * 21.6px + 1rem), calc(2 * 1rem)));
    --t-h2: min(calc(2.5 * 1.2vw + 1rem), max(calc(2.5 * 21.6px + 1rem), calc(3.5 * 1rem)));
    --t-h1: min(calc(8.3 * 1.2vw + 1rem), max(calc(8.3 * 21.6px + 1rem), calc(9.3 * 1rem)));
  }
}

@media (min-width: 1025px), (min-width: 800px) and (not (pointer: coarse)) { :root { --alto-cabecera: calc(2.8vw + 50px); } }  /* escritorio: 1,4vw arriba y abajo + logo de 50px */

/* ---------- 2) BASE Y TIPOGRAFÍA ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--verde);
  font-family: var(--f-texto); font-size: var(--t-normal); line-height: 1.325;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { overflow-wrap: anywhere; word-break: break-word; font-family: var(--f-titulo); font-weight: 785; font-stretch: 110%;  /* calibrado para medir lo mismo que Pragmatica Extended */ text-transform: uppercase; letter-spacing: -0.08em; margin: 0; }
h1 { font-size: var(--t-h1); line-height: 0.7348; }
h2 { font-size: var(--t-h2); line-height: 0.99; }
h3 { font-size: var(--t-h3); line-height: 1.056; }
h4 { font-size: var(--t-h4); line-height: 1.1; font-weight: 840; font-stretch: 108%; }  /* los títulos pequeños necesitan más peso para igualar la tinta de Pragmatica */
p { margin: 1rem 0; font-size: var(--t-normal); line-height: 1.325; }
p.pequeno { font-size: var(--t-pequeno); }
.bloque :is(p, h1, h2, h3, h4) { white-space: pre-wrap; }  /* respeta los espacios y saltos tal como se escribieron */
p.etiqueta { font-family: var(--f-mono); font-size: var(--t-normal); line-height: 1.325; text-transform: none; letter-spacing: 0; margin: 0; }
strong { font-weight: 700; }
.c-verde { color: var(--verde); }
.c-crema { color: var(--crema); }
.c-lima { color: var(--lima); }
.c-salvia { color: var(--salvia); }
.saltar { position: absolute; left: -9999px; top: 24px; background: var(--verde); color: var(--crema); padding: 15px 19.5px; z-index: 50; }
.saltar:focus { left: 24px; }

/* ---------- 3) CABECERA ---------- */
/* Menú con botón (móvil) hasta 799 px, y también en pantallas táctiles de hasta 1024 px.
   A partir de ahí, menú de escritorio. La altura de la cabecera crece con el ancho de la pantalla. */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 30; transition: transform 0.3s ease; }
.cabecera::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid var(--verde); pointer-events: none; z-index: 3; }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera-interior { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 6vw; }
.logo { display: block; line-height: 0; }
.logo img { width: auto; height: 30px; }
.menu-escritorio { display: none; }
.acciones { display: flex; align-items: center; }
.burger { position: relative; width: 47px; height: 37px; margin-left: 22px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.burger-linea { position: absolute; left: 50%; top: 50%; width: 36px; height: 1px; margin-left: -18px; background: currentColor; transition: transform 0.25s ease; }
.burger-linea-1 { transform: translateY(-5.5px); }
.burger-linea-2 { transform: translateY(5.5px); }
.menu-abierto .burger-linea-1 { transform: rotate(45deg); }
.menu-abierto .burger-linea-2 { transform: rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--alto-cabecera) 35px 0; background: var(--lima); }
.menu-movil[hidden] { display: none; }
.menu-movil a { font-size: calc(1.8 * var(--paso) + 1rem); line-height: 1.1; text-transform: uppercase; text-decoration: none; letter-spacing: 0; }
.menu-abierto { overflow: hidden; }
.menu-abierto .cabecera::after { border-bottom-color: transparent; }

@media (min-width: 1025px), (min-width: 800px) and (not (pointer: coarse)) {
  /* como el resto de la página, la cabecera no pasa de 1800px de ancho y se centra en pantallas muy anchas */
  .cabecera-interior { padding: 1.4vw max(var(--pagina), calc((100% - var(--ancho-max)) / 2)); }
  .logo img { height: 50px; }
  .menu-escritorio { display: flex; margin-left: auto; gap: 1.5vw; font-size: var(--t-nav); letter-spacing: 0.013em; line-height: 1.8; text-transform: uppercase; }
  .menu-escritorio a { text-decoration: none; padding: 0.1em 0; }
  .menu-escritorio a[aria-current] { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  .burger, .menu-movil { display: none; }
}

/* ---------- 4) REJILLA Y SECCIONES ---------- */
/* Rejilla de 8 columnas en móvil y 24 en escritorio. Cada bloque se coloca con grid-area (ver el final del archivo). */
.seccion { position: relative; }
.seccion { padding-block: var(--pad-vert, 0px); }
.seccion.primera { padding-top: calc(var(--alto-cabecera) + var(--pad-vert, 0px)); }
.tema-claro { background: var(--crema); color: var(--verde); }
.tema-salvia { background: var(--salvia); color: var(--crema); }
.tema-verde { background: var(--verde); color: var(--crema); }
.tema-foto { background: var(--verde); color: var(--crema); }
.tema-verde a { color: var(--lima); }
.fondo { position: absolute; inset: 0; overflow: hidden; }
.fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.velo { position: absolute; inset: 0; background: var(--verde); opacity: 0.2; }
.rejilla {
  --cols: 8;
  --gutter: calc(var(--pagina-movil) - var(--ajuste-m, 0px));
  --celda: calc((var(--ancho-max) - var(--gap-col, 0px) * (var(--cols) - 1)) / var(--cols));
  position: relative; display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) repeat(var(--cols), minmax(0, var(--celda))) minmax(var(--gutter), 1fr);
  grid-template-rows: repeat(var(--filas-m), minmax(24px, auto));
  row-gap: var(--gap-fila, 0px); column-gap: var(--gap-col, 0px);
  overflow-x: hidden; overflow-x: clip;
}
@media (min-width: 768px) {
  .rejilla {
    --cols: 24;
    --gutter: calc(var(--pagina) - var(--ajuste-e, 0px));
    --ancho-contenedor: min(var(--ancho-max), calc(100vw - var(--pagina) * 2));
    grid-template-rows: repeat(var(--filas-e), minmax(calc(var(--ancho-contenedor) * 0.0215), auto));
  }
}

/* ---------- 5) BLOQUES ---------- */
.bloque { position: relative; display: flex; flex-direction: column; justify-content: var(--vj, flex-start); min-width: 0; }
.contenido { width: 100%; }
.contenido > :first-child { margin-top: 0; }
.contenido > :last-child { margin-bottom: 0; }
.contenido p:empty::before { content: "\00a0"; }  /* un párrafo vacío ocupa una línea, como en la original */
.bloque-escalado { container-type: inline-size; }
/* el titular escalado va en línea dentro de una línea de texto normal, como en la original:
   si es más bajo que esa línea (el del pie en móvil), queda apoyado en su línea base */
.bloque-escalado h1 { display: inline-block; white-space: nowrap; line-height: 1; font-size: 17.8cqw; }
.pie-b5 h1 { font-size: 5.14cqw; }
.bloque-imagen img, .bloque-imagen .ampliar { position: absolute; inset: 0; width: 100%; height: 100%; }
.bloque-imagen img { object-fit: cover; object-position: 50% 50%; }
.ampliar { padding: 0; border: 0; background: none; cursor: zoom-in; }
/* imagen "ajustada": se ve entera (sin recortar), centrada, ocupando el alto de su hueco */
.bloque-imagen.ajustada img { position: static; flex: 1 1 0; min-height: 0; width: auto; height: auto; max-width: 100%; align-self: center; object-fit: contain; }

.boton { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-texto); font-weight: 500; letter-spacing: 0.01em;  /* Geist en peso 500 es un poco más ancha que Aktiv */ text-decoration: none; text-align: center; border-radius: 10px; padding: 15px 19.5px; font-size: 1rem; line-height: normal; }
.boton-medio { font-size: 1rem; }
.boton-grande { font-size: var(--t-grande); }
.boton-primario { background: var(--verde); color: var(--lima); }
.boton-secundario { color: var(--lima); border: 1px solid var(--lima); }
.bloque-boton .boton-primario { flex: 1; padding-block: 0; }
.bloque-boton .boton-secundario { align-self: center; }
.tema-foto .boton-primario, .boton-enviar { background: var(--lima); color: var(--verde); }
/* efecto al pasar el ratón (igual que la web original) */
.boton { transition: opacity 0.1s linear; }
.boton-secundario { transition: background-color 0.1s linear, color 0.1s linear; }
@media (hover: hover) {
  .boton-primario:hover, .boton-enviar:hover { opacity: 0.8; }
  .boton-secundario:hover { background: var(--lima); color: var(--verde); }
}

.formulario { width: 100%; font-size: var(--t-pequeno); }
.formulario fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.formulario legend { padding: 0; margin-bottom: 4px; }
.formulario .par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.formulario label { display: block; }
.formulario .campo { margin-top: 20px; }
.formulario .obligatorio { opacity: 0.6; margin-left: 2px; }
.formulario input, .formulario textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid #000; border-radius: 0; background: #fafafa; color: #000; font-family: var(--f-texto); font-size: var(--t-normal); line-height: 1.325; }
.formulario textarea { height: 100px; resize: vertical; }
.formulario .boton-enviar { margin-top: 20px; border: 0; cursor: pointer; }
.formulario .boton-enviar:disabled { opacity: 0.5; cursor: wait; }
.formulario-aviso { margin-top: 16px; }

/* ---------- 6) PIE (igual en todas las páginas) ---------- */
.pie { padding-bottom: var(--pagina); }
.pie a { text-decoration: underline; }
.pie h4 { color: var(--lima); }
.pie h1 { color: var(--lima); }

/* ---------- AMPLIAR IMAGEN (lightbox de la home) ---------- */
.visor { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.93); cursor: zoom-out; }
.visor[hidden] { display: none; }
.visor img { max-width: 96vw; max-height: 96vh; object-fit: contain; }
.visor-cerrar { position: absolute; top: 18px; right: 34px; width: 24px; height: 24px; border: 0; background: none; color: var(--crema); font-size: 22px; font-weight: 200; line-height: 1; cursor: pointer; }


/* ========== DISEÑO DE CADA PÁGINA (posiciones en la rejilla) ========== */
/* ===== home ===== */
.home-s1{--filas-m:47;--filas-e:43;--gap-fila:0.0px;--gap-col:10.0px;--ajuste-m:10.0px;--ajuste-e:10.0px}
.home-s1-b1{grid-area:2/2/5/10;z-index:1}
.home-s1-b2{grid-area:5/2/21/10;z-index:3;--vj:center;--ha:center}
.home-s1-b3{grid-area:22/2/33/10;z-index:15}
.home-s1-b4{grid-area:33/2/35/10;z-index:16;--vj:center;--ha:center}
.home-s1-b5{grid-area:36/2/47/10;z-index:10}
@media (min-width:768px){.home-s1-b1{grid-area:1/2/10/26;z-index:1}.home-s1-b2{grid-area:9/2/44/16;z-index:3}.home-s1-b3{grid-area:9/17/21/26;z-index:15}.home-s1-b4{grid-area:22/17/24/23;z-index:16}.home-s1-b5{grid-area:28/17/38/24;z-index:10;--vj:flex-end;--ha:flex-end}}
.home-s2{--filas-m:39;--filas-e:38;--gap-fila:12.0px;--gap-col:12.0px;--ajuste-m:12.0px;--ajuste-e:12.0px}
.home-s2-b1{grid-area:2/2/14/10;z-index:9;--vj:center;--ha:center}
.home-s2-b2{grid-area:14/2/16/10;z-index:13}
.home-s2-b3{grid-area:16/2/21/10;z-index:8}
.home-s2-b4{grid-area:21/2/23/10;z-index:11}
.home-s2-b5{grid-area:23/2/31/10;z-index:10;--vj:center;--ha:center}
.home-s2-b6{grid-area:31/2/39/10;z-index:11;--vj:center;--ha:center}
@media (min-width:768px){.home-s2-b1{grid-area:1/13/17/26;z-index:9}.home-s2-b2{grid-area:3/2/7/10;z-index:13}.home-s2-b3{grid-area:7/2/15/10;z-index:8;--vj:flex-end;--ha:flex-end}.home-s2-b4{grid-area:18/2/20/15;z-index:11;--vj:center;--ha:center}.home-s2-b5{grid-area:19/2/38/15;z-index:10}.home-s2-b6{grid-area:19/13/38/26;z-index:11}}

/* ===== services ===== */
.services-s1{--filas-m:35;--filas-e:31;--gap-fila:5.0px;--gap-col:12.0px;--ajuste-m:12.0px;--ajuste-e:12.0px}
.services-s1-b1{grid-area:2/2/3/10;z-index:16}
.services-s1-b2{grid-area:3/2/5/10;z-index:17}
.services-s1-b3{grid-area:5/2/16/10;z-index:5;--vj:center;--ha:center}
.services-s1-b4{grid-area:17/2/33/10;z-index:3}
.services-s1-b5{grid-area:33/2/35/7;z-index:18;--vj:center;--ha:center}
@media (min-width:768px){.services-s1-b1{grid-area:3/2/5/13;z-index:16}.services-s1-b2{grid-area:4/2/6/13;z-index:17}.services-s1-b3{grid-area:3/13/30/26;z-index:5}.services-s1-b4{grid-area:7/2/21/11;z-index:3;--vj:flex-end;--ha:flex-end}.services-s1-b5{grid-area:22/2/24/8;z-index:18}}
.services-s2{--filas-m:30;--filas-e:26;--gap-fila:12.0px;--gap-col:12.0px;--ajuste-m:12.0px;--ajuste-e:12.0px}
.services-s2-b1{grid-area:2/2/5/10;z-index:16}
.services-s2-b2{grid-area:5/2/6/10;z-index:17}
.services-s2-b3{grid-area:6/2/17/10;z-index:5;--vj:center;--ha:center}
.services-s2-b4{grid-area:17/2/31/10;z-index:3}
@media (min-width:768px){.services-s2-b1{grid-area:3/2/6/12;z-index:16}.services-s2-b2{grid-area:6/2/7/12;z-index:17}.services-s2-b3{grid-area:2/13/24/26;z-index:5}.services-s2-b4{grid-area:7/2/18/12;z-index:3;--vj:flex-end;--ha:flex-end}}
.services-s3{--filas-m:32;--filas-e:27;--gap-fila:10.0px;--gap-col:5.0px;--ajuste-m:5.0px;--ajuste-e:5.0px}
.services-s3-b1{grid-area:3/2/5/8;z-index:16}
.services-s3-b2{grid-area:5/2/16/10;z-index:5;--vj:center;--ha:center}
.services-s3-b3{grid-area:17/2/31/10;z-index:3}
@media (min-width:768px){.services-s3-b1{grid-area:3/2/6/10;z-index:16}.services-s3-b2{grid-area:3/13/24/26;z-index:5}.services-s3-b3{grid-area:5/2/18/10;z-index:3;--vj:flex-end;--ha:flex-end}}

/* ===== information ===== */
.information-s1{--filas-m:52;--filas-e:38;--gap-fila:11.0px;--gap-col:11.0px;--ajuste-m:11.0px;--ajuste-e:11.0px}
.information-s1-b1{grid-area:2/2/5/10;z-index:14}
.information-s1-b2{grid-area:5/2/18/10;z-index:3;--vj:center;--ha:center}
.information-s1-b3{grid-area:3/2/6/10;z-index:15}
.information-s1-b4{grid-area:18/2/34/10;z-index:1}
.information-s1-b5{grid-area:34/2/37/10;z-index:17}
.information-s1-b6{grid-area:37/5/40/10;z-index:19;--vj:center;--ha:center}
.information-s1-b7{grid-area:40/2/52/10;z-index:15}
@media (min-width:768px){.information-s1-b1{grid-area:3/3/5/12;z-index:2}.information-s1-b2{grid-area:3/16/22/25;z-index:1}.information-s1-b3{grid-area:4/3/6/13;z-index:3}.information-s1-b4{grid-area:6/3/20/14;z-index:4;--vj:flex-end;--ha:flex-end}.information-s1-b5{grid-area:20/3/23/11;z-index:7}.information-s1-b6{grid-area:23/3/26/8;z-index:9}.information-s1-b7{grid-area:26/3/39/11;z-index:5}}

/* ===== sobre-claudia ===== */
.sobre-claudia-s1{--filas-m:16;--filas-e:13;--gap-fila:11.0px;--gap-col:11.0px;--ajuste-m:11.0px;--ajuste-e:11.0px}
.seccion.sobre-claudia-s1{--pad-vert:3.3vmax}
.sobre-claudia-s1-b1{grid-area:7/2/10/6;z-index:1;--vj:center;--ha:center}
.sobre-claudia-s1-b2{grid-area:10/2/13/10;z-index:0}
.sobre-claudia-s1-b3{grid-area:15/2/17/10;z-index:3;--vj:center;--ha:center}
@media (min-width:768px){.sobre-claudia-s1-b1{grid-area:4/2/8/14;z-index:1}.sobre-claudia-s1-b2{grid-area:7/2/14/17;z-index:0;--vj:flex-end;--ha:flex-end}.sobre-claudia-s1-b3{grid-area:11/17/14/24;z-index:3}}
.sobre-claudia-s2{--filas-m:39;--filas-e:22;--gap-fila:11.0px;--gap-col:11.0px;--ajuste-m:11.0px;--ajuste-e:11.0px}
.seccion.sobre-claudia-s2{--pad-vert:6.6vmax}
.sobre-claudia-s2-b1{grid-area:2/4/11/10;z-index:9;--vj:center;--ha:center}
.sobre-claudia-s2-b2{grid-area:2/2/4/10;z-index:3}
.sobre-claudia-s2-b3{grid-area:12/2/17/10;z-index:4}
.sobre-claudia-s2-b4{grid-area:17/2/18/10;z-index:5}
.sobre-claudia-s2-b5{grid-area:18/2/21/10;z-index:6}
.sobre-claudia-s2-b6{grid-area:21/2/22/10;z-index:6}
.sobre-claudia-s2-b7{grid-area:22/2/31/10;z-index:7}
.sobre-claudia-s2-b8{grid-area:31/2/32/10;z-index:6}
.sobre-claudia-s2-b9{grid-area:32/2/40/10;z-index:7}
@media (min-width:768px){.sobre-claudia-s2-b1{grid-area:2/2/16/11;z-index:9}.sobre-claudia-s2-b2{grid-area:1/2/3/10;z-index:3}.sobre-claudia-s2-b3{grid-area:2/12/8/23;z-index:4}.sobre-claudia-s2-b4{grid-area:7/12/9/18;z-index:5}.sobre-claudia-s2-b5{grid-area:8/12/11/18;z-index:6}.sobre-claudia-s2-b6{grid-area:7/20/9/26;z-index:6}.sobre-claudia-s2-b7{grid-area:8/20/20/26;z-index:7}.sobre-claudia-s2-b8{grid-area:12/12/23/18;z-index:6}.sobre-claudia-s2-b9{grid-area:13/12/22/18;z-index:7}}

/* ===== pie (igual en todas las paginas) ===== */
.pie-rejilla{--filas-m:21;--filas-e:9;--gap-fila:0.0px;--gap-col:0.0px;--ajuste-m:0.0px;--ajuste-e:0.0px}
.pie-b1{grid-area:4/2/5/10;z-index:2}
.pie-b2{grid-area:5/2/9/10;z-index:12}
.pie-b3{grid-area:11/2/12/10;z-index:3}
.pie-b4{grid-area:12/2/15/10;z-index:13}
.pie-b5{grid-area:18/2/22/10;z-index:0}
@media (min-width:768px){.pie-b1{grid-area:6/7/7/12;z-index:2}.pie-b2{grid-area:7/7/10/12;z-index:12}.pie-b3{grid-area:6/19/7/22;z-index:3}.pie-b4{grid-area:7/19/10/22;z-index:13}.pie-b5{grid-area:1/1/4/27;z-index:0;--vj:flex-end}}