/* GNL · Configurador de producto terminado v4 · movido desde snipplets/product/gnl-configurador.tpl (2026-09-28) */
#gnl-page { --navy: #1e4fa3; }
#gnl-page { --azul: #1e4fa3; --azul2: #163d80; --tinte: #e9eff9; --ink: #14213d; --ink2: #5a6478; --line: #dfe4ee; --bg: #f4f6fa; --verde: #25c05a; --verde2: #1aa04a; --ambar: #f2c94c; --rojo: #e05a4e; }
#gnl-page, #gnl-page * { box-sizing: border-box; }
#gnl-page { margin: 0px; font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { #gnl-page, #gnl-page * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
#gnl-page #gnl-config { --gc-azul: #1e4fa3; --gc-azul2: #163d80; --gc-tinte: #e9eff9; --gc-ink: #14213d; --gc-ink2: #5a6478; --gc-line: #dfe4ee; --gc-verde: #25c05a; --gc-verde2: #1aa04a; font-family: inherit; color: var(--gc-ink); font-size: 15px; line-height: 1.45; display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
#gnl-page #gnl-config * { box-sizing: border-box; }
@media (max-width: 900px) { #gnl-page #gnl-config { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #gnl-page #gnl-config .gc-side { position: static; order: -1; } }
#gnl-page #gnl-config h2, #gnl-page #gnl-config h3, #gnl-page #gnl-config p { margin: 0px; }
#gnl-page #gnl-config .gc-brand { display: flex; gap: 10px; align-items: center; background: rgb(255, 255, 255); border: 1.5px solid var(--gc-azul); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
#gnl-page #gnl-config .gc-brand label { font-size: 13px; color: var(--gc-azul); font-weight: 600; white-space: nowrap; }
#gnl-page #gnl-config .gc-brand input { flex: 1 1 0%; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; outline: 0px; background: transparent; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-acc { border: 1px solid var(--gc-line); border-radius: 14px; background: rgb(255, 255, 255); margin-bottom: 10px; overflow: hidden; }
#gnl-page #gnl-config .gc-acc-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
#gnl-page #gnl-config .gc-acc-h .n { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gc-line); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--gc-ink2); flex: 0 0 auto; }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .n { background: var(--gc-azul); border-color: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-acc.open .gc-acc-h .n { border-color: var(--gc-azul); color: var(--gc-azul); }
#gnl-page #gnl-config .gc-acc-h .t { flex: 1 1 0%; }
#gnl-page #gnl-config .gc-acc-h .t b { display: block; font-size: 15px; font-weight: 600; }
#gnl-page #gnl-config .gc-acc-h .t span { display: block; font-size: 13px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .t span { color: var(--gc-azul); font-weight: 500; }
#gnl-page #gnl-config .gc-acc-h .chg { font-size: 13px; color: var(--gc-azul); text-decoration: underline; display: none; }
#gnl-page #gnl-config .gc-acc.done:not(.open) .gc-acc-h .chg { display: block; }
#gnl-page #gnl-config .gc-acc-b { display: none; padding: 4px 16px 18px 56px; border-top: 1px solid var(--gc-line); }
@media (max-width: 600px) { #gnl-page #gnl-config .gc-acc-b { padding-left: 16px; } }
#gnl-page #gnl-config .gc-acc.open .gc-acc-b { display: block; }
#gnl-page #gnl-config .gc-acc.locked { opacity: 0.55; }
#gnl-page #gnl-config .gc-acc.locked .gc-acc-h { cursor: not-allowed; }
#gnl-page #gnl-config .gc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; margin-top: 12px; }
#gnl-page #gnl-config .gc-tile { border: 1.5px solid var(--gc-line); border-radius: 10px; padding: 11px 12px 10px; background: rgb(255, 255, 255); cursor: pointer; text-align: left; font: inherit; position: relative; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-tile:hover { border-color: rgb(152, 172, 216); }
#gnl-page #gnl-config .gc-tile.on { border-color: var(--gc-azul); box-shadow: inset 0 0 0 1px var(--gc-azul); background: var(--gc-tinte); }
#gnl-page #gnl-config .gc-tile[disabled] { opacity: 0.35; cursor: not-allowed; }
#gnl-page #gnl-config .gc-tile b { display: block; font-size: 14px; font-weight: 600; }
#gnl-page #gnl-config .gc-tile span { display: block; font-size: 12px; color: var(--gc-ink2); margin-top: 3px; line-height: 1.35; }
#gnl-page #gnl-config .gc-tile .dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 7px; }
#gnl-page #gnl-config .gc-tile .pill { position: absolute; top: -9px; right: 10px; font-size: 10px; font-weight: 700; background: var(--gc-azul); color: rgb(255, 255, 255); padding: 2px 7px; border-radius: 5px; }
#gnl-page #gnl-config .gc-tile .price { display: block; font-size: 13px; font-weight: 700; margin-top: 5px; }
#gnl-page #gnl-config .gc-seg { display: inline-flex; border: 1.5px solid var(--gc-line); border-radius: 9px; overflow: hidden; margin-top: 12px; background: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-seg button { border: 0px; background: transparent; padding: 9px 15px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13.5px; cursor: pointer; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-seg button.on { background: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tip { font-size: 12.5px; color: var(--gc-ink2); margin-top: 10px; display: flex; gap: 8px; }
#gnl-page #gnl-config .gc-tip::before { content: "i"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--gc-tinte); color: var(--gc-azul); font-weight: 700; font-size: 11px; display: grid; place-items: center; margin-top: 2px; }
#gnl-page #gnl-config .gc-insight { margin-top: 12px; background: rgb(255, 255, 255); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--gc-azul); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; display: none; }
#gnl-page #gnl-config .gc-insight.show { display: block; }
#gnl-page #gnl-config .gc-insight b { display: block; font-size: 14px; margin-bottom: 3px; }
#gnl-page #gnl-config .gc-insight p { margin-bottom: 7px; }
#gnl-page #gnl-config .gc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#gnl-page #gnl-config .gc-meta span { background: var(--gc-tinte); border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--gc-azul2); }
#gnl-page #gnl-config .gc-next { margin-top: 14px; border: 0px; background: var(--gc-azul); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-weight: 600; padding: 10px 18px; border-radius: 9px; cursor: pointer; }
#gnl-page #gnl-config .gc-next:disabled { background: rgb(199, 208, 226); cursor: not-allowed; }
#gnl-page #gnl-config .gc-side { position: sticky; top: 12px; }
#gnl-page #gnl-config .gc-stage { position: relative; border-radius: 16px; overflow: hidden; background: rgb(246, 242, 234); aspect-ratio: 1 / 1; }
#gnl-page #gnl-config .gc-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gnl-page #gnl-config .gc-label { position: absolute; right: 12px; bottom: 12px; width: 196px; background: rgb(255, 255, 255); border-radius: 10px; padding: 13px 14px 11px; box-shadow: rgba(22, 61, 128, 0.15) 0px 10px 30px; font-size: 11.5px; line-height: 1.4; }
#gnl-page #gnl-config .gc-label .brand { font-size: 18px; font-weight: 800; min-height: 22px; }
#gnl-page #gnl-config .gc-label .brand.ph { color: rgb(183, 191, 208); font-weight: 600; }
#gnl-page #gnl-config .gc-label .prod { font-weight: 600; margin-top: 3px; }
#gnl-page #gnl-config .gc-label .claim { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px solid var(--gc-line); margin: 8px 0px; }
#gnl-page #gnl-config .gc-label .row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0px; }
#gnl-page #gnl-config .gc-label .row span:first-child { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label .row span:last-child { font-weight: 600; text-align: right; }
#gnl-page #gnl-config .gc-label .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 4px; vertical-align: -1px; }
#gnl-page #gnl-config .gc-label .ft { margin-top: 8px; font-size: 9px; color: var(--gc-ink2); line-height: 1.35; }
#gnl-page #gnl-config .gc-quien { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 14px 16px; font-size: 13px; }
#gnl-page #gnl-config .gc-quien h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#gnl-page #gnl-config .gc-quien .ph { color: rgb(154, 164, 184); font-size: 12.5px; }
#gnl-page #gnl-config .gc-quien .ing { margin: 6px 0px; padding-left: 10px; border-left: 3px solid var(--gc-line); }
#gnl-page #gnl-config .gc-quien .ing small { display: block; color: var(--gc-ink2); font-size: 12px; }
#gnl-page #gnl-config .gc-quote { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 16px 18px; }
#gnl-page #gnl-config .gc-kpi { display: flex; justify-content: space-between; align-items: flex-end; }
#gnl-page #gnl-config .gc-kpi .l { font-size: 12.5px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
#gnl-page #gnl-config .gc-cta { width: 100%; margin-top: 12px; border: 0px; border-radius: 10px; background: var(--gc-verde); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 17px; font-weight: 700; padding: 15px; cursor: pointer; }
#gnl-page #gnl-config .gc-cta:hover { background: var(--gc-verde2); }
#gnl-page #gnl-config .gc-cta:disabled { background: rgb(201, 208, 220); cursor: not-allowed; }
#gnl-page #gnl-config .gc-fine { font-size: 12px; color: var(--gc-ink2); margin-top: 8px; text-align: center; }
#gnl-page #gnl-config .gc-recibes { margin-top: 14px; border-top: 1px solid var(--gc-line); padding-top: 12px; font-size: 13px; }
#gnl-page #gnl-config .gc-recibes b { display: block; margin-bottom: 5px; }
#gnl-page #gnl-config .gc-recibes ul { margin: 0px; padding: 0px; list-style: none; }
#gnl-page #gnl-config .gc-recibes li { padding-left: 18px; position: relative; margin: 3px 0px; }
#gnl-page #gnl-config .gc-recibes li::before { content: "✓"; position: absolute; left: 0px; color: var(--gc-azul); font-weight: 700; }
#gnl-page #gnl-config .gc-natural { margin-top: 10px; background: rgb(241, 247, 239); border: 1px solid rgb(212, 230, 207); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: rgb(47, 74, 44); display: flex; gap: 9px; }
#gnl-page #gnl-config .gc-natural p { margin: 0px; }
#gnl-page #gnl-config .gc-natural label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
#gnl-page #gnl-config .gc-natural input { margin-top: 3px; }
#gnl-page #gnl-config .gc-err { display: none; margin-top: 8px; color: rgb(180, 35, 24); font-size: 13px; }
#gnl-page .cfg-wrap { padding: 0px; }
#gnl-page .cfg-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
#gnl-page .cfg-back { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 9px; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--ink2); white-space: nowrap; }
#gnl-page .cfg-crumb { font-size: 12px; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.06em; }
#gnl-page #cfg-title { font-size: clamp(20px, 2.6vw, 28px); margin: 2px 0px 0px; letter-spacing: -0.01em; }
#gnl-page .act-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
#gnl-page .act-tools button { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 999px; padding: 5px 11px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 12.5px; cursor: pointer; }
#gnl-page .act-tools button.on { background: var(--ink); border-color: var(--ink); color: rgb(255, 255, 255); }
#gnl-page .act-tools input { flex: 1 1 0%; min-width: 160px; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13px; }
#gnl-page #gnl-config .gc-tile .badge { display: inline-block; margin-top: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: 0.04em; }
#gnl-page #gnl-config .gc-tile .badge.std { background: rgb(238, 240, 244); color: rgb(90, 100, 120); }
#gnl-page #gnl-config .gc-tile .badge.prem { background: rgb(30, 79, 163); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tile .badge.sug { background: rgb(255, 243, 214); color: rgb(138, 91, 0); }
#gnl-page #gnl-config .gc-tile .badge.base { background: rgb(232, 245, 236); color: rgb(31, 107, 58); }
#gnl-page #gnl-config .gc-tiles.envm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#gnl-page #gnl-config .gc-tile .envimg { width: 100%; height: 110px; object-fit: cover; border-radius: 7px; margin-bottom: 8px; background: rgb(244, 244, 244); }
#gnl-page #gnl-config .gc-tiles.envm .gc-tile .envimg { object-fit: contain; background: #fff; }
#gnl-page #gnl-config .gc-tiles.acts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#gnl-page #gnl-config .gc-tiles.acts .gc-tile { min-height: 52px; }
#gnl-page #gnl-config .gc-tile.picked { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--tinte); }
#gnl-page #gnl-config .gc-tile .ord { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#gnl-page .meter { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
#gnl-page .meter div { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink2); }
#gnl-page .meter b { font-weight: 500; color: var(--ink); }
#gnl-page .dots { letter-spacing: 1px; color: var(--navy); }
#gnl-page .ben-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#gnl-page .ben-chips button { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 999px; padding: 5px 11px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 12.5px; cursor: pointer; }
#gnl-page .ben-chips button.on { background: var(--navy); border-color: var(--navy); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tile .af { display: block; font-size: 11.5px; color: var(--ink2); margin-top: 3px; line-height: 1.3; }
#gnl-page #gnl-config .gc-tile .ab { display: block; font-size: 11px; color: var(--navy); margin-top: 2px; }
#gnl-page #gnl-config .gc-tile.hit { border-color: rgb(152, 172, 216); background: rgb(247, 249, 253); }
#gnl-page .gc-quien .meter div { font-size: 12.5px; }
#gnl-page .na { font-size: 13px; color: var(--ink2); background: var(--tinte); border-radius: 8px; padding: 9px 12px; margin-top: 10px; }
#gnl-page .dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--navy); margin-right: 3px; vertical-align: middle; box-sizing: border-box; }
#gnl-page .dots i.f { background: var(--navy); }
#gnl-page { padding-bottom: 20px; }
#gnl-page .bens .meter div { font-size: 12.5px; }
#gnl-page { --azul: #1e4fa3; --azul2: #163d80; --tinte: #e9eff9; --ink: #14213d; --ink2: #5a6478; --line: #dfe4ee; --bg: #f4f6fa; --verde: #25c05a; --verde2: #1aa04a; --ambar: #f2c94c; --rojo: #e05a4e; }
#gnl-page, #gnl-page * { box-sizing: border-box; }
#gnl-page { margin: 0px; font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { #gnl-page, #gnl-page * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
#gnl-page #gnl-config { --gc-azul: #1e4fa3; --gc-azul2: #163d80; --gc-tinte: #e9eff9; --gc-ink: #14213d; --gc-ink2: #5a6478; --gc-line: #dfe4ee; --gc-verde: #25c05a; --gc-verde2: #1aa04a; font-family: inherit; color: var(--gc-ink); font-size: 15px; line-height: 1.45; display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
#gnl-page #gnl-config * { box-sizing: border-box; }
@media (max-width: 900px) { #gnl-page #gnl-config { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #gnl-page #gnl-config .gc-side { position: static; order: -1; } }
#gnl-page #gnl-config h2, #gnl-page #gnl-config h3, #gnl-page #gnl-config p { margin: 0px; }
#gnl-page #gnl-config .gc-brand { display: flex; gap: 10px; align-items: center; background: rgb(255, 255, 255); border: 1.5px solid var(--gc-azul); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
#gnl-page #gnl-config .gc-brand label { font-size: 13px; color: var(--gc-azul); font-weight: 600; white-space: nowrap; }
#gnl-page #gnl-config .gc-brand input { flex: 1 1 0%; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; outline: 0px; background: transparent; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-acc { border: 1px solid var(--gc-line); border-radius: 14px; background: rgb(255, 255, 255); margin-bottom: 18px; overflow: hidden; box-shadow: rgba(22, 61, 128, 0.05) 0px 2px 10px; }
#gnl-page #gnl-config .gc-acc.open { border-color: var(--gc-azul); box-shadow: rgba(22, 61, 128, 0.1) 0px 6px 24px; }
#gnl-page #gnl-config .gc-acc-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
#gnl-page #gnl-config .gc-acc-h .n { width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--gc-line); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--gc-ink2); flex: 0 0 auto; line-height: 1; }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .n { background: var(--gc-azul); border-color: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-acc.open .gc-acc-h .n { border-color: var(--gc-azul); color: var(--gc-azul); }
#gnl-page #gnl-config .gc-acc-h .t { flex: 1 1 0%; }
#gnl-page #gnl-config .gc-acc-h .t b { display: block; font-size: 15px; font-weight: 600; }
#gnl-page #gnl-config .gc-acc-h .t span { display: block; font-size: 13px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .t span { color: var(--gc-azul); font-weight: 500; }
#gnl-page #gnl-config .gc-acc-h .chg { font-size: 13px; color: var(--gc-azul); text-decoration: underline; display: none; }
#gnl-page #gnl-config .gc-acc.done:not(.open) .gc-acc-h .chg { display: block; }
#gnl-page #gnl-config .gc-acc-b { display: none; padding: 4px 16px 18px 56px; border-top: 1px solid var(--gc-line); }
@media (max-width: 600px) { #gnl-page #gnl-config .gc-acc-b { padding-left: 16px; } }
#gnl-page #gnl-config .gc-acc.open .gc-acc-b { display: block; }
#gnl-page #gnl-config .gc-acc.locked { opacity: 0.55; }
#gnl-page #gnl-config .gc-acc.locked .gc-acc-h { cursor: not-allowed; }
#gnl-page #gnl-config .gc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; margin-top: 12px; }
#gnl-page #gnl-config .gc-tile { border: 1.5px solid var(--gc-line); border-radius: 10px; padding: 11px 12px 10px; background: rgb(255, 255, 255); cursor: pointer; text-align: left; font: inherit; position: relative; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-tile:hover { border-color: rgb(152, 172, 216); }
#gnl-page #gnl-config .gc-tile.on { border-color: var(--gc-azul); box-shadow: inset 0 0 0 1px var(--gc-azul); background: var(--gc-tinte); }
#gnl-page #gnl-config .gc-tile[disabled] { opacity: 0.35; cursor: not-allowed; }
#gnl-page #gnl-config .gc-tile b { display: block; font-size: 14px; font-weight: 600; }
#gnl-page #gnl-config .gc-tile span { display: block; font-size: 12px; color: var(--gc-ink2); margin-top: 3px; line-height: 1.35; }
#gnl-page #gnl-config .gc-tile .dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 7px; }
#gnl-page #gnl-config .gc-tile .pill { position: absolute; top: -9px; right: 10px; font-size: 10px; font-weight: 700; background: var(--gc-azul); color: rgb(255, 255, 255); padding: 2px 7px; border-radius: 5px; }
#gnl-page #gnl-config .gc-tile .price { display: block; font-size: 13px; font-weight: 700; margin-top: 5px; }
#gnl-page #gnl-config .gc-seg { display: inline-flex; border: 1.5px solid var(--gc-line); border-radius: 9px; overflow: hidden; margin-top: 12px; background: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-seg button { border: 0px; background: transparent; padding: 9px 15px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13.5px; cursor: pointer; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-seg button.on { background: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tip { font-size: 12.5px; color: var(--gc-ink2); margin-top: 10px; display: flex; gap: 8px; }
#gnl-page #gnl-config .gc-tip::before { content: "i"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--gc-tinte); color: var(--gc-azul); font-weight: 700; font-size: 11px; display: grid; place-items: center; margin-top: 2px; }
#gnl-page #gnl-config .gc-insight { margin-top: 12px; background: rgb(255, 255, 255); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--gc-azul); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; display: none; }
#gnl-page #gnl-config .gc-insight.show { display: block; }
#gnl-page #gnl-config .gc-insight b { display: block; font-size: 14px; margin-bottom: 3px; }
#gnl-page #gnl-config .gc-insight p { margin-bottom: 7px; }
#gnl-page #gnl-config .gc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#gnl-page #gnl-config .gc-meta span { background: var(--gc-tinte); border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--gc-azul2); }
#gnl-page #gnl-config .gc-next { margin-top: 14px; border: 0px; background: var(--gc-azul); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-weight: 600; padding: 10px 18px; border-radius: 9px; cursor: pointer; }
#gnl-page #gnl-config .gc-next:disabled { background: rgb(199, 208, 226); cursor: not-allowed; }
#gnl-page #gnl-config .gc-side { position: sticky; top: 12px; }
#gnl-page #gnl-config .gc-stage { position: relative; border-radius: 16px; overflow: hidden; background: rgb(246, 242, 234); aspect-ratio: 1 / 1; }
#gnl-page #gnl-config .gc-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gnl-page #gnl-config .gc-label { position: absolute; right: 12px; bottom: 12px; width: 196px; background: rgb(255, 255, 255); border-radius: 10px; padding: 13px 14px 11px; box-shadow: rgba(22, 61, 128, 0.15) 0px 10px 30px; font-size: 11.5px; line-height: 1.4; }
#gnl-page #gnl-config .gc-label .brand { font-size: 18px; font-weight: 800; min-height: 22px; }
#gnl-page #gnl-config .gc-label .brand.ph { color: rgb(183, 191, 208); font-weight: 600; }
#gnl-page #gnl-config .gc-label .prod { font-weight: 600; margin-top: 3px; }
#gnl-page #gnl-config .gc-label .claim { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px solid var(--gc-line); margin: 8px 0px; }
#gnl-page #gnl-config .gc-label .row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0px; }
#gnl-page #gnl-config .gc-label .row span:first-child { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label .row span:last-child { font-weight: 600; text-align: right; }
#gnl-page #gnl-config .gc-label .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 4px; vertical-align: -1px; }
#gnl-page #gnl-config .gc-label .ft { margin-top: 8px; font-size: 9px; color: var(--gc-ink2); line-height: 1.35; }
#gnl-page #gnl-config .gc-quien { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 14px 16px; font-size: 13px; }
#gnl-page #gnl-config .gc-quien h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#gnl-page #gnl-config .gc-quien .ph { color: rgb(154, 164, 184); font-size: 12.5px; }
#gnl-page #gnl-config .gc-quien .ing { margin: 6px 0px; padding-left: 10px; border-left: 3px solid var(--gc-line); }
#gnl-page #gnl-config .gc-quien .ing small { display: block; color: var(--gc-ink2); font-size: 12px; }
#gnl-page #gnl-config .gc-quote { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 16px 18px; }
#gnl-page #gnl-config .gc-kpi { display: flex; justify-content: space-between; align-items: flex-end; }
#gnl-page #gnl-config .gc-kpi .l { font-size: 12.5px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
#gnl-page #gnl-config .gc-cta { width: 100%; margin-top: 12px; border: 0px; border-radius: 10px; background: var(--gc-verde); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 17px; font-weight: 700; padding: 15px; cursor: pointer; }
#gnl-page #gnl-config .gc-cta:hover { background: var(--gc-verde2); }
#gnl-page #gnl-config .gc-cta:disabled { background: rgb(201, 208, 220); cursor: not-allowed; }
#gnl-page #gnl-config .gc-fine { font-size: 12px; color: var(--gc-ink2); margin-top: 8px; text-align: center; }
#gnl-page #gnl-config .gc-recibes { margin-top: 14px; border-top: 1px solid var(--gc-line); padding-top: 12px; font-size: 13px; }
#gnl-page #gnl-config .gc-recibes b { display: block; margin-bottom: 5px; }
#gnl-page #gnl-config .gc-recibes ul { margin: 0px; padding: 0px; list-style: none; }
#gnl-page #gnl-config .gc-recibes li { padding-left: 18px; position: relative; margin: 3px 0px; }
#gnl-page #gnl-config .gc-recibes li::before { content: "✓"; position: absolute; left: 0px; color: var(--gc-azul); font-weight: 700; }
#gnl-page #gnl-config .gc-natural { margin-top: 10px; background: rgb(241, 247, 239); border: 1px solid rgb(212, 230, 207); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: rgb(47, 74, 44); display: flex; gap: 9px; }
#gnl-page #gnl-config .gc-natural p { margin: 0px; }
#gnl-page #gnl-config .gc-natural label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
#gnl-page #gnl-config .gc-natural input { margin-top: 3px; }
#gnl-page #gnl-config .gc-err { display: none; margin-top: 8px; color: rgb(180, 35, 24); font-size: 13px; }
#gnl-page .cfg-wrap { padding: 0px; }
#gnl-page .cfg-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
#gnl-page .cfg-back { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 9px; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--ink2); white-space: nowrap; }
#gnl-page .cfg-crumb { font-size: 12px; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.06em; }
#gnl-page #cfg-title { font-size: clamp(20px, 2.6vw, 28px); margin: 2px 0px 0px; letter-spacing: -0.01em; }
#gnl-page { --navy: #1e4fa3; }
#gnl-page { --azul: #1e4fa3; --azul2: #163d80; --tinte: #e9eff9; --ink: #14213d; --ink2: #5a6478; --line: #dfe4ee; --bg: #f4f6fa; --verde: #25c05a; --verde2: #1aa04a; --ambar: #f2c94c; --rojo: #e05a4e; }
#gnl-page, #gnl-page * { box-sizing: border-box; }
#gnl-page { margin: 0px; font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { #gnl-page, #gnl-page * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
#gnl-page #gnl-config { --gc-azul: #1e4fa3; --gc-azul2: #163d80; --gc-tinte: #e9eff9; --gc-ink: #14213d; --gc-ink2: #5a6478; --gc-line: #dfe4ee; --gc-verde: #25c05a; --gc-verde2: #1aa04a; font-family: inherit; color: var(--gc-ink); font-size: 15px; line-height: 1.45; display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
#gnl-page #gnl-config * { box-sizing: border-box; }
@media (max-width: 900px) { #gnl-page #gnl-config { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #gnl-page #gnl-config .gc-side { position: static; order: -1; } }
#gnl-page #gnl-config h2, #gnl-page #gnl-config h3, #gnl-page #gnl-config p { margin: 0px; }
#gnl-page #gnl-config .gc-brand { display: flex; gap: 10px; align-items: center; background: rgb(255, 255, 255); border: 1.5px solid var(--gc-azul); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
#gnl-page #gnl-config .gc-brand label { font-size: 13px; color: var(--gc-azul); font-weight: 600; white-space: nowrap; }
#gnl-page #gnl-config .gc-brand input { flex: 1 1 0%; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; outline: 0px; background: transparent; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-acc { border: 1px solid var(--gc-line); border-radius: 14px; background: rgb(255, 255, 255); margin-bottom: 18px; overflow: hidden; box-shadow: rgba(22, 61, 128, 0.05) 0px 2px 10px; }
#gnl-page #gnl-config .gc-acc.open { border-color: var(--gc-azul); box-shadow: rgba(22, 61, 128, 0.1) 0px 6px 24px; }
#gnl-page #gnl-config .gc-acc-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
#gnl-page #gnl-config .gc-acc-h .n { width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--gc-line); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--gc-ink2); flex: 0 0 auto; line-height: 1; }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .n { background: var(--gc-azul); border-color: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-acc.open .gc-acc-h .n { border-color: var(--gc-azul); color: var(--gc-azul); }
#gnl-page #gnl-config .gc-acc-h .t { flex: 1 1 0%; }
#gnl-page #gnl-config .gc-acc-h .t b { display: block; font-size: 15px; font-weight: 600; }
#gnl-page #gnl-config .gc-acc-h .t span { display: block; font-size: 13px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-acc.done .gc-acc-h .t span { color: var(--gc-azul); font-weight: 500; }
#gnl-page #gnl-config .gc-acc-h .chg { font-size: 13px; color: var(--gc-azul); text-decoration: underline; display: none; }
#gnl-page #gnl-config .gc-acc.done:not(.open) .gc-acc-h .chg { display: block; }
#gnl-page #gnl-config .gc-acc-b { display: none; padding: 4px 16px 18px 56px; border-top: 1px solid var(--gc-line); }
@media (max-width: 600px) { #gnl-page #gnl-config .gc-acc-b { padding-left: 16px; } }
#gnl-page #gnl-config .gc-acc.open .gc-acc-b { display: block; }
#gnl-page #gnl-config .gc-acc.locked { opacity: 0.55; }
#gnl-page #gnl-config .gc-acc.locked .gc-acc-h { cursor: not-allowed; }
#gnl-page #gnl-config .gc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; margin-top: 12px; }
#gnl-page #gnl-config .gc-tile { border: 1.5px solid var(--gc-line); border-radius: 10px; padding: 11px 12px 10px; background: rgb(255, 255, 255); cursor: pointer; text-align: left; font: inherit; position: relative; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-tile:hover { border-color: rgb(152, 172, 216); }
#gnl-page #gnl-config .gc-tile.on { border-color: var(--gc-azul); box-shadow: inset 0 0 0 1px var(--gc-azul); background: var(--gc-tinte); }
#gnl-page #gnl-config .gc-tile[disabled] { opacity: 0.35; cursor: not-allowed; }
#gnl-page #gnl-config .gc-tile b { display: block; font-size: 14px; font-weight: 600; }
#gnl-page #gnl-config .gc-tile span { display: block; font-size: 12px; color: var(--gc-ink2); margin-top: 3px; line-height: 1.35; }
#gnl-page #gnl-config .gc-tile .dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 7px; }
#gnl-page #gnl-config .gc-tile .pill { position: absolute; top: -9px; right: 10px; font-size: 10px; font-weight: 700; background: var(--gc-azul); color: rgb(255, 255, 255); padding: 2px 7px; border-radius: 5px; }
#gnl-page #gnl-config .gc-tile .price { display: block; font-size: 13px; font-weight: 700; margin-top: 5px; }
#gnl-page #gnl-config .gc-seg { display: inline-flex; border: 1.5px solid var(--gc-line); border-radius: 9px; overflow: hidden; margin-top: 12px; background: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-seg button { border: 0px; background: transparent; padding: 9px 15px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13.5px; cursor: pointer; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-seg button.on { background: var(--gc-azul); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tip { font-size: 12.5px; color: var(--gc-ink2); margin-top: 10px; display: flex; gap: 8px; }
#gnl-page #gnl-config .gc-tip::before { content: "i"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--gc-tinte); color: var(--gc-azul); font-weight: 700; font-size: 11px; display: grid; place-items: center; margin-top: 2px; }
#gnl-page #gnl-config .gc-insight { margin-top: 12px; background: rgb(255, 255, 255); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--gc-azul); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; display: none; }
#gnl-page #gnl-config .gc-insight.show { display: block; }
#gnl-page #gnl-config .gc-insight b { display: block; font-size: 14px; margin-bottom: 3px; }
#gnl-page #gnl-config .gc-insight p { margin-bottom: 7px; }
#gnl-page #gnl-config .gc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#gnl-page #gnl-config .gc-meta span { background: var(--gc-tinte); border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--gc-azul2); }
#gnl-page #gnl-config .gc-next { margin-top: 14px; border: 0px; background: var(--gc-azul); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-weight: 600; padding: 10px 18px; border-radius: 9px; cursor: pointer; }
#gnl-page #gnl-config .gc-next:disabled { background: rgb(199, 208, 226); cursor: not-allowed; }
#gnl-page #gnl-config .gc-side { position: sticky; top: 12px; }
#gnl-page #gnl-config .gc-stage { position: relative; border-radius: 16px; overflow: hidden; background: rgb(246, 242, 234); aspect-ratio: 1 / 1; }
#gnl-page #gnl-config .gc-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gnl-page #gnl-config .gc-label { position: absolute; right: 12px; bottom: 12px; width: 196px; background: rgb(255, 255, 255); border-radius: 10px; padding: 13px 14px 11px; box-shadow: rgba(22, 61, 128, 0.15) 0px 10px 30px; font-size: 11.5px; line-height: 1.4; }
#gnl-page #gnl-config .gc-label .brand { font-size: 18px; font-weight: 800; min-height: 22px; }
#gnl-page #gnl-config .gc-label .brand.ph { color: rgb(183, 191, 208); font-weight: 600; }
#gnl-page #gnl-config .gc-label .prod { font-weight: 600; margin-top: 3px; }
#gnl-page #gnl-config .gc-label .claim { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px solid var(--gc-line); margin: 8px 0px; }
#gnl-page #gnl-config .gc-label .row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0px; }
#gnl-page #gnl-config .gc-label .row span:first-child { color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-label .row span:last-child { font-weight: 600; text-align: right; }
#gnl-page #gnl-config .gc-label .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); margin-right: 4px; vertical-align: -1px; }
#gnl-page #gnl-config .gc-label .ft { margin-top: 8px; font-size: 9px; color: var(--gc-ink2); line-height: 1.35; }
#gnl-page #gnl-config .gc-quien { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 14px 16px; font-size: 13px; }
#gnl-page #gnl-config .gc-quien h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#gnl-page #gnl-config .gc-quien .ph { color: rgb(154, 164, 184); font-size: 12.5px; }
#gnl-page #gnl-config .gc-quien .ing { margin: 6px 0px; padding-left: 10px; border-left: 3px solid var(--gc-line); }
#gnl-page #gnl-config .gc-quien .ing small { display: block; color: var(--gc-ink2); font-size: 12px; }
#gnl-page #gnl-config .gc-quote { margin-top: 12px; background: rgb(255, 255, 255); border: 1px solid var(--gc-line); border-radius: 14px; padding: 16px 18px; }
#gnl-page #gnl-config .gc-kpi { display: flex; justify-content: space-between; align-items: flex-end; }
#gnl-page #gnl-config .gc-kpi .l { font-size: 12.5px; color: var(--gc-ink2); }
#gnl-page #gnl-config .gc-kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
#gnl-page #gnl-config .gc-cta { width: 100%; margin-top: 12px; border: 0px; border-radius: 10px; background: var(--gc-verde); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 17px; font-weight: 700; padding: 15px; cursor: pointer; }
#gnl-page #gnl-config .gc-cta:hover { background: var(--gc-verde2); }
#gnl-page #gnl-config .gc-cta:disabled { background: rgb(201, 208, 220); cursor: not-allowed; }
#gnl-page #gnl-config .gc-fine { font-size: 12px; color: var(--gc-ink2); margin-top: 8px; text-align: center; }
#gnl-page #gnl-config .gc-recibes { margin-top: 14px; border-top: 1px solid var(--gc-line); padding-top: 12px; font-size: 13px; }
#gnl-page #gnl-config .gc-recibes b { display: block; margin-bottom: 5px; }
#gnl-page #gnl-config .gc-recibes ul { margin: 0px; padding: 0px; list-style: none; }
#gnl-page #gnl-config .gc-recibes li { padding-left: 18px; position: relative; margin: 3px 0px; }
#gnl-page #gnl-config .gc-recibes li::before { content: "✓"; position: absolute; left: 0px; color: var(--gc-azul); font-weight: 700; }
#gnl-page #gnl-config .gc-natural { margin-top: 10px; background: rgb(241, 247, 239); border: 1px solid rgb(212, 230, 207); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: rgb(47, 74, 44); display: flex; gap: 9px; }
#gnl-page #gnl-config .gc-natural p { margin: 0px; }
#gnl-page #gnl-config .gc-natural label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
#gnl-page #gnl-config .gc-natural input { margin-top: 3px; }
#gnl-page #gnl-config .gc-err { display: none; margin-top: 8px; color: rgb(180, 35, 24); font-size: 13px; }
#gnl-page .cfg-wrap { padding: 0px; }
#gnl-page .cfg-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
#gnl-page .cfg-back { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 9px; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--ink2); white-space: nowrap; }
#gnl-page .cfg-crumb { font-size: 12px; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.06em; }
#gnl-page #cfg-title { font-size: clamp(20px, 2.6vw, 28px); margin: 2px 0px 0px; letter-spacing: -0.01em; }
#gnl-page .act-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
#gnl-page .act-tools button { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 999px; padding: 5px 11px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 12.5px; cursor: pointer; }
#gnl-page .act-tools button.on { background: var(--ink); border-color: var(--ink); color: rgb(255, 255, 255); }
#gnl-page .act-tools input { flex: 1 1 0%; min-width: 160px; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13px; }
#gnl-page #gnl-config .gc-tile .badge { display: inline-block; margin-top: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: 0.04em; }
#gnl-page #gnl-config .gc-tile .badge.std { background: rgb(238, 240, 244); color: rgb(90, 100, 120); }
#gnl-page #gnl-config .gc-tile .badge.prem { background: rgb(30, 79, 163); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tile .badge.sug { background: rgb(255, 243, 214); color: rgb(138, 91, 0); }
#gnl-page #gnl-config .gc-tile .badge.base { background: rgb(232, 245, 236); color: rgb(31, 107, 58); }
#gnl-page #gnl-config .gc-tiles.envm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#gnl-page #gnl-config .gc-tile .envimg { width: 100%; height: 110px; object-fit: cover; border-radius: 7px; margin-bottom: 8px; background: rgb(244, 244, 244); }
#gnl-page #gnl-config .gc-tiles.acts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#gnl-page #gnl-config .gc-tiles.acts .gc-tile { min-height: 52px; }
#gnl-page #gnl-config .gc-tile.picked { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--tinte); }
#gnl-page #gnl-config .gc-tile .ord { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#gnl-page .meter { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
#gnl-page .meter div { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink2); }
#gnl-page .meter b { font-weight: 500; color: var(--ink); }
#gnl-page .dots { letter-spacing: 1px; color: var(--navy); }
#gnl-page .ben-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#gnl-page .ben-chips button { border: 1.5px solid var(--line); background: rgb(255, 255, 255); border-radius: 999px; padding: 5px 11px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 12.5px; cursor: pointer; }
#gnl-page .ben-chips button.on { background: var(--navy); border-color: var(--navy); color: rgb(255, 255, 255); }
#gnl-page #gnl-config .gc-tile .af { display: block; font-size: 11.5px; color: var(--ink2); margin-top: 3px; line-height: 1.3; }
#gnl-page #gnl-config .gc-tile .ab { display: block; font-size: 11px; color: var(--navy); margin-top: 2px; }
#gnl-page #gnl-config .gc-tile.hit { border-color: rgb(152, 172, 216); background: rgb(247, 249, 253); }
#gnl-page .gc-quien .meter div { font-size: 12.5px; }
#gnl-page #gnl-config .gc-tile.inbase { opacity: 0.45; cursor: not-allowed; background: rgb(246, 247, 249); }
#gnl-page #gnl-config .gc-tile .badge.base { background: rgb(232, 245, 236); color: rgb(31, 107, 58); }
#gnl-page #gnl-config .gc-tile .badge.sug { background: rgb(255, 243, 214); color: rgb(138, 91, 0); }
#gnl-page .sug-box { margin-top: 12px; background: rgb(255, 250, 240); border: 1px solid rgb(241, 223, 162); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
#gnl-page .sug-box b { display: block; margin-bottom: 4px; }
#gnl-page .na { font-size: 13px; color: var(--ink2); background: var(--tinte); border-radius: 8px; padding: 9px 12px; margin-top: 10px; }
#gnl-page .sig { display: inline-flex; align-items: flex-end; gap: 2px; margin-right: 8px; vertical-align: middle; height: 14px; }
#gnl-page .sig i { display: inline-block; width: 4px; border-radius: 1px; background: rgb(201, 211, 230); }
#gnl-page .sig i.f { background: rgb(37, 192, 90); }
#gnl-page .gc-seg button.on .sig i { background: rgba(255, 255, 255, 0.35); }
#gnl-page .gc-seg button.on .sig i.f { background: rgb(142, 240, 173); }
#gnl-page .hd-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgb(30, 79, 163); margin-right: 2px; vertical-align: middle; box-sizing: border-box; }
#gnl-page .hd-dots i.f { background: rgb(30, 79, 163); }

/* ---- Tema: ocultar ficha nativa mientras carga y cuando el configurador toma la página ---- */
#single-product:has(#product_form.gnl-pt),
.js-product-container:has(#product_form.gnl-pt) { display: none !important; }
.gnl-theme-hidden { display: none !important; }
#product_form.gnl-pt .gnl-native-variants,
#product_form.gnl-pt .gnl-native-qty,
#product_form.gnl-pt .gnl-native-cta { display: none !important; }

/* ---- Página a lo ancho (como el demo) ---- */
#gnl-page { max-width: 1180px; margin: 0 auto; padding: 32px 20px 80px; text-align: left;
  box-shadow: 0 0 0 100vmax var(--bg, #f4f6fa); clip-path: inset(0 -100vmax); }
#gnl-page .cfg-head { max-width: 1180px; margin: 0 auto 18px; }
#gnl-page #cfg-title { font-weight: 700; line-height: 1.2; color: var(--ink, #14213d); text-transform: none; }
#gnl-page #gnl-config .gc-side { top: 80px; }
#gnl-page #gnl-config .gc-acc { scroll-margin-top: 90px; }

#gnl-page #gnl-config .gc-acc.open.done .gc-acc-h .n { color: #fff; }
/* ---- Blindaje contra estilos globales del tema ---- */
#gnl-page, #gnl-page * { font-family: "Onest", "Plus Jakarta Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
#gnl-page h1, #gnl-page h2, #gnl-page h3, #gnl-page p { text-transform: none; letter-spacing: normal; }
#gnl-page button { text-transform: none; letter-spacing: normal; line-height: inherit; min-height: 0; box-shadow: none; width: auto; height: auto; }
#gnl-page #gnl-config .gc-cta { width: 100%; }
#gnl-page label { text-transform: none; letter-spacing: normal; float: none; width: auto; margin: 0; font-size: inherit; }
#gnl-page input[type=text], #gnl-page input:not([type]) { height: auto; box-shadow: none; margin: 0; }
#gnl-page #gnl-config .gc-brand input { border: 0; padding: 0; background: transparent; }
#gnl-page input[type=checkbox] { -webkit-appearance: checkbox; appearance: auto; position: static; opacity: 1; width: 16px; height: 16px; display: inline-block; flex: none; }
#gnl-page #gnl-config .gc-label .row { flex-wrap: nowrap; margin-left: 0; margin-right: 0; }
#gnl-page #gnl-config .gc-tile .badge { white-space: nowrap; line-height: 1.4; vertical-align: baseline; }
#gnl-page img { max-width: 100%; }
#gnl-page #gnl-config .gc-envlink { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: #1e4fa3; text-decoration: underline; }
#gnl-page .gc-swenv { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); margin-right: 5px; vertical-align: -1px; }
#gnl-page button:focus-visible, #gnl-page .gc-acc-h:focus-visible, #gnl-page input:focus-visible { outline: 2px solid #1e4fa3; outline-offset: 2px; }
@media (max-width: 600px) { #gnl-page { padding: 20px 14px 60px; } #gnl-page .cfg-head { flex-direction: column; gap: 10px; } }
/* Ajustes visuales locales; se conservan la paleta y los indicadores. */
#gnl-page #gnl-config { line-height: 1.5; }
#gnl-page #cfg-title { letter-spacing: -0.025em; line-height: 1.25; }
#gnl-page #gnl-config .gc-acc { box-shadow: 0 2px 8px rgba(22, 61, 128, 0.05); }
#gnl-page #gnl-config .gc-acc.open { box-shadow: 0 4px 16px rgba(22, 61, 128, 0.1); }
#gnl-page #gnl-config .gc-acc-h { padding-top: 16px; padding-bottom: 16px; }
#gnl-page #gnl-config .gc-acc-h .t span { margin-top: 3px; }
#gnl-page #gnl-config .gc-acc-h .chg, #gnl-page #gnl-config .gc-envlink { text-underline-offset: 3px; }
#gnl-page #gnl-config .gc-acc-b { padding-top: 8px; padding-bottom: 20px; }
#gnl-page #gnl-config .gc-tile { border-width: 1px; padding: 12px; }
#gnl-page #gnl-config .gc-tile.picked > b { padding-right: 18px; }
#gnl-page #gnl-config .gc-tile .af, #gnl-page #gnl-config .gc-tile span { line-height: 1.45; }
#gnl-page #gnl-config .gc-label .row { margin-top: 5px; margin-bottom: 5px; }
#gnl-page #gnl-config .gc-kpi .v { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
#gnl-page #gnl-config .gc-natural, #gnl-page .na, #gnl-page .sug-box { line-height: 1.6; }
#gnl-page #gnl-config .gc-brand input, #gnl-page #gnl-config .gc-acc-h .t { min-width: 0; }
#gnl-page #gnl-config .gc-label .row span { min-width: 0; overflow-wrap: anywhere; }

/* ===== Celular (≤900px) · 2026-09-28 =====
   1) El resumen ya no se queda pegado encima de los pasos (el sticky de escritorio ganaba a la regla móvil).
   2) Orden: etiqueta de tu marca → pasos → para quién es → precio y compra.
   3) Barra inferior con precio y botón (se crea desde gnl-configurador.js). */
@media (max-width: 900px) {
  #gnl-page #gnl-config .gc-side { position: static !important; top: auto !important; display: contents; }
  #gnl-page #gnl-config .gc-stage { order: -2; min-height: 0 !important; padding: 14px !important; }
  #gnl-page #gnl-config > main { order: -1; min-width: 0; }
  #gnl-page #gnl-config .gc-quien { order: 1; }
  #gnl-page #gnl-config .gc-quote { order: 2; scroll-margin-top: 90px; }
  #gnl-page #gnl-config .gc-label .row { font-size: 13px; }
  #gnl-page .gc-acc { scroll-margin-top: 90px; }
}
.gc-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 14px; background: rgba(255,255,255,.97);
  border-top: 1px solid #dfe4ee; box-shadow: 0 -8px 24px rgba(20,33,61,.10); font-family: inherit;
  transform: translateY(110%); transition: transform .22s ease; }
.gc-mbar.on { transform: none; }
.gc-mbar[hidden] { display: none; }
.gc-mbar-p { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gc-mbar-p small { font-size: 11px; color: #5a6478; }
.gc-mbar-p b { font-size: 16px; color: #14213d; white-space: nowrap; }
.gc-mbar-p b s { display: none; }
.gc-mbar-btn { margin-left: auto; flex: 0 1 auto; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px;
  background: linear-gradient(145deg,#2a63c4,#163d80); color: #fff; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.gc-mbar-btn.pending { background: #e9eff9; color: #1e4fa3; }
@media (min-width: 901px) { .gc-mbar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gc-mbar { transition: none; } }

/* GNL · Configurador · ajustes 2026-09-29 (se carga después de gnl-configurador.css)
   1) Etiquetas de activos (Sugerido / Premium / Estándar / Ya en la base) en su propia fila: no se enciman con el nombre.
   2) Activos sugeridos de la primera fila resaltados en dorado, igual que el aviso de "Sugeridos". */
#gnl-page #gnl-config .gc-tile .gc-tags { display: flex !important; flex-wrap: wrap; gap: 4px; margin: 0 26px 7px 0 !important; padding: 0 !important; position: static !important; }
#gnl-page #gnl-config .gc-tile .gc-tags .badge { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; display: inline-block !important; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; line-height: 1.3; }
#gnl-page #gnl-config .gc-tile .gc-tags .badge.sug { background: #f5b83d; color: #4a3000; box-shadow: 0 2px 6px rgba(197,134,0,.25); }
#gnl-page #gnl-config .gc-tile .gc-tags .badge.prem { background: #1e4fa3; color: #fff; }
#gnl-page #gnl-config .gc-tile .gc-tags .badge.std { background: #eef0f4; color: #5a6478; }
#gnl-page #gnl-config .gc-tile .gc-tags .badge.base { background: #e8f5ec; color: #1f6b3a; }
#gnl-page #gnl-config .gc-tiles.acts .gc-tile b { margin-top: 0; overflow-wrap: anywhere; }

/* Sugeridos (primera fila) */
#gnl-page #gnl-config .gc-tile.gc-sug { border: 2px solid #e5a92e; background: linear-gradient(180deg, #fff8e8 0%, #fff 70%); box-shadow: 0 8px 20px rgba(229,169,46,.18); }
#gnl-page #gnl-config .gc-tile.gc-sug:hover { border-color: #c98f14; box-shadow: 0 10px 24px rgba(229,169,46,.26); }
#gnl-page #gnl-config .gc-tile.gc-sug.picked { border-color: var(--navy, #1e4fa3); background: var(--tinte, #e9eff9); box-shadow: inset 0 0 0 1px var(--navy, #1e4fa3); }
#gnl-page #gnl-config .gc-tile.gc-sug[disabled] { box-shadow: none; }

/* Aviso de sugeridos con el mismo acento dorado */
#gnl-page #gnl-config .sug-box { border: 1px solid #f1d58f !important; border-left: 4px solid #e5a92e !important; background: #fff8e8 !important; border-radius: 12px; }
#gnl-page #gnl-config .sug-box b::before { content: "★ "; color: #d9960f; }

/* Todas las etiquetas del configurador van en el flujo normal (el tema posiciona .badge de forma absoluta). */
#gnl-page #gnl-config .gc-tile .badge { position: static !important; inset: auto !important; transform: none !important; float: none !important; }
/* Envase: "Se abre en su propia página" como nota al pie de la tarjeta */
#gnl-page #gnl-config #gc-g-env .gc-tile .badge.sug { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 10px !important; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; background: #fff3d6; color: #7a5200; white-space: normal; max-width: 100%; line-height: 1.3; }
#gnl-page #gnl-config #gc-g-env .gc-tile .badge.sug::after { content: "↗"; font-size: 11px; }

/* Aromas con identidad propia: ícono, color y descripción */
#gnl-page #gnl-config #gc-g-aroma { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#gnl-page #gnl-config .gc-tile.gc-aroma { --aro: #6b7a99; --aro-t: #eef2f8; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 14px 14px 14px 16px; border-left: 4px solid var(--aro); min-height: 78px; transition: transform .15s, box-shadow .15s, border-color .15s, background .15s; }
#gnl-page #gnl-config .gc-tile.gc-aroma .gc-aro-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 21px; line-height: 1; background: var(--aro-t); color: var(--aro); font-weight: 700; }
#gnl-page #gnl-config .gc-tile.gc-aroma b { align-self: end; }
#gnl-page #gnl-config .gc-tile.gc-aroma span { grid-column: 2; margin-top: 1px; font-size: 11.5px; color: var(--gc-ink2); align-self: start; }
#gnl-page #gnl-config .gc-tile.gc-aroma:hover { transform: translateY(-1px); border-color: var(--aro); box-shadow: 0 8px 18px rgba(20,33,61,.08); }
#gnl-page #gnl-config .gc-tile.gc-aroma.on { background: var(--aro-t); border-color: var(--aro); box-shadow: inset 0 0 0 1px var(--aro), 0 8px 18px rgba(20,33,61,.08); }
#gnl-page #gnl-config .gc-tile.gc-aroma.on .gc-aro-ico { background: #fff; }
@media (prefers-reduced-motion: reduce) { #gnl-page #gnl-config .gc-tile.gc-aroma { transition: none; } #gnl-page #gnl-config .gc-tile.gc-aroma:hover { transform: none; } }

/* Color del envase: panel visible con muestras de color */
#gnl-page #gnl-config .gc-envcolor { margin-top: 16px; padding: 16px 18px; border: 2px solid #f0c35a; border-radius: 14px; background: linear-gradient(180deg, #fff9ea, #fff); box-shadow: 0 8px 20px rgba(229,169,46,.14); }
#gnl-page #gnl-config .gc-envcolor.done { border-color: #9cd3b0; background: linear-gradient(180deg, #f0faf3, #fff); box-shadow: 0 8px 20px rgba(31,138,72,.10); }
#gnl-page #gnl-config .gc-envcolor-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#gnl-page #gnl-config .gc-envcolor-h b { display: block; font-size: 16px; color: var(--gc-ink); }
#gnl-page #gnl-config .gc-envcolor-h small { display: block; font-size: 12.5px; color: var(--gc-ink2); margin-top: 1px; }
#gnl-page #gnl-config .gc-envcolor-n { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: #f5b83d; color: #4a3000; }
#gnl-page #gnl-config .gc-envcolor.done .gc-envcolor-n { background: #2f9e5a; color: #fff; }
#gnl-page #gnl-config .gc-envcolor-opts { display: flex; flex-wrap: wrap; gap: 10px; }
#gnl-page #gnl-config .gc-envcol { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 8px; border: 1.5px solid var(--gc-line); border-radius: 999px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--gc-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
#gnl-page #gnl-config .gc-envcol:hover { border-color: #98acd8; transform: translateY(-1px); }
#gnl-page #gnl-config .gc-envcol-sw { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 2px #fff; }
#gnl-page #gnl-config .gc-envcol.on { border-color: var(--gc-azul); background: var(--gc-tinte); box-shadow: inset 0 0 0 1px var(--gc-azul), 0 6px 14px rgba(30,79,163,.15); }
#gnl-page #gnl-config .gc-envcol.on .gc-envcol-sw { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--gc-azul); }
@media (max-width: 600px) { #gnl-page #gnl-config .gc-envcolor { padding: 14px; } #gnl-page #gnl-config .gc-envcol { flex: 1 1 calc(50% - 10px); } }
@media (prefers-reduced-motion: reduce) { #gnl-page #gnl-config .gc-envcol { transition: none; } #gnl-page #gnl-config .gc-envcol:hover { transform: none; } }