/* Salvia farinacea · experiencia 3D (salvaplantas v2). Estilo original de «Salvia Azul», aislado bajo #app.sa.
   Generado desde D:\Documents\webapps\Salvia Azul\dist\style.css + reglas de integración y móvil al final. */
#app.sa { --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --bg: #06070d; --ink: #eceaf6; --muted: #a4a2bc; --dim: #6f6d88;
  --violet: #8f82ff; --violet-d: #5b4fc4; --leaf: #9bc26b; --ochre: #d9a441; --silver: #cfd3ea; --amber: #ffb547;
  --glass: rgba(11, 12, 24, 0.66); --line: rgba(236, 234, 246, 0.12); --line2: rgba(236, 234, 246, 0.22);
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; }
#app.sa * { box-sizing: border-box; margin: 0; padding: 0; }
#app.sa button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#app.sa { position: fixed; inset: 0; color: var(--ink); }
#app.sa #backdrop { position: absolute; inset: 0; transition: background 1.2s ease; background: radial-gradient(120% 90% at 62% 40%, #1a1830 0%, #0a0a14 55%, #040409 100%); }
#app.sa #scene { position: absolute; inset: 0; }
#app.sa #scene canvas { display: block; width: 100% !important; height: 100% !important; }
#app.sa .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 100% at 60% 45%, transparent 55%, rgba(0,0,0,.55) 100%); transition: opacity 1s; }
#app.sa .grain { position: absolute; inset: -50%; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
#app.sa @keyframes grain { 0% { transform: translate(0,0) }
#app.sa 50% { transform: translate(-3%, 2%) }
#app.sa 100% { transform: translate(2%, -2%) }
#app.sa }
.chrome { position: absolute; z-index: 5; transition: opacity .6s ease, transform .6s ease; }
#app.sa .top { top: 0; left: 0; right: 0; height: calc(92 * var(--u)); padding: 0 calc(56 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
#app.sa .brand { display: flex; align-items: center; gap: calc(14 * var(--u)); color: var(--ink); text-decoration: none; }
#app.sa .brand svg { width: calc(30 * var(--u)); height: calc(36 * var(--u)); color: var(--violet); }
#app.sa .brand b { display: block; font-family: var(--serif); font-weight: 500; font-size: calc(26 * var(--u)); letter-spacing: .01em; }
#app.sa .brand small { display: block; font-size: calc(10.5 * var(--u)); letter-spacing: .28em; color: var(--muted); margin-top: calc(2 * var(--u)); }
#app.sa .top-right { display: flex; align-items: center; gap: calc(22 * var(--u)); }
#app.sa .lenses { display: flex; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); border: 1px solid var(--line); border-radius: 999px; background: rgba(10,10,20,.45); backdrop-filter: blur(10px); }
#app.sa .lenses button { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(15 * var(--u)); border-radius: 999px; font-size: calc(13 * var(--u)); color: var(--muted); transition: background .3s, color .3s; }
#app.sa .lenses button i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--c, var(--violet)); box-shadow: 0 0 calc(8 * var(--u)) var(--c, var(--violet)); }
#app.sa .lenses button kbd { font-family: var(--mono); font-size: calc(10 * var(--u)); color: var(--dim); }
#app.sa .lenses button:hover { color: var(--ink); }
#app.sa .lenses button.on { background: rgba(143,130,255,.16); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(143,130,255,.45); }
#app.sa .lang { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--dim); }
#app.sa .lang button { color: var(--muted); letter-spacing: .08em; }
#app.sa .lang button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--violet); }
#app.sa .icon-btn { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
#app.sa .icon-btn svg { width: 55%; }
#app.sa .icon-btn:hover { color: var(--ink); border-color: var(--line2); }
#app.sa #panel { left: calc(64 * var(--u)); top: calc(150 * var(--u)); width: calc(540 * var(--u)); }
#app.sa .kicker { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: .24em; text-transform: uppercase; color: var(--violet); }
#app.sa .kicker .num { font-family: var(--mono); letter-spacing: 0; padding: calc(3 * var(--u)) calc(8 * var(--u)); border: 1px solid rgba(143,130,255,.45); border-radius: 4px; }
#app.sa #title { font-family: var(--serif); font-weight: 500; font-size: calc(76 * var(--u)); line-height: 1.0; margin: calc(18 * var(--u)) 0 calc(20 * var(--u)); letter-spacing: -.005em; font-variant-numeric: lining-nums; }
#app.sa[data-ch="intro"] #title { font-style: italic; font-size: calc(92 * var(--u)); }
#app.sa .lead { font-size: calc(17.5 * var(--u)); line-height: 1.62; color: #d6d4e6; max-width: 100%; }
#app.sa .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: calc(28 * var(--u)) 0 calc(22 * var(--u)); background: var(--line); border: 1px solid var(--line); border-radius: calc(10 * var(--u)); overflow: hidden; }
#app.sa .facts:empty { display: none; }
#app.sa .fact { background: rgba(8,8,18,.72); padding: calc(13 * var(--u)) calc(16 * var(--u)); }
#app.sa .fact span { display: block; font-size: calc(10.5 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
#app.sa .fact b { display: block; margin-top: calc(5 * var(--u)); font-family: var(--serif); font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1.15; font-variant-numeric: lining-nums; }
#app.sa .note { font-size: calc(13.5 * var(--u)); line-height: 1.6; color: var(--muted); padding-left: calc(14 * var(--u)); border-left: 2px solid var(--ochre); }
#app.sa .note:empty { display: none; }
#app.sa #widget { right: calc(56 * var(--u)); top: calc(140 * var(--u)); width: calc(600 * var(--u)); max-height: calc(800 * var(--u)); }
#app.sa #widget:empty { display: none; }
#app.sa .card { background: var(--glass); border: 1px solid var(--line); border-radius: calc(14 * var(--u)); backdrop-filter: blur(14px); padding: calc(22 * var(--u)) calc(24 * var(--u)); }
#app.sa .card + .card { margin-top: calc(14 * var(--u)); }
#app.sa .card h3 { font-family: var(--serif); font-weight: 500; font-size: calc(24 * var(--u)); margin-bottom: calc(12 * var(--u)); display: flex; justify-content: space-between; align-items: baseline; }
#app.sa .card h3 small { font-family: var(--sans); font-size: calc(11 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
#app.sa .tag { display: inline-block; font-size: calc(10 * var(--u)); letter-spacing: .12em; text-transform: uppercase; padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: 3px; border: 1px solid currentColor; }
#app.sa .cite { font-family: var(--mono); font-size: calc(10.5 * var(--u)); color: var(--dim); }
#app.sa .care-list { list-style: none; }
#app.sa .care-list li { display: grid; grid-template-columns: calc(30 * var(--u)) 1fr auto; gap: calc(14 * var(--u)); align-items: start; padding: calc(12 * var(--u)) 0; border-top: 1px solid var(--line); cursor: pointer; }
#app.sa .care-list li:first-child { border-top: 0; }
#app.sa .care-list .box { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; transition: all .35s; }
#app.sa .care-list li.done .box { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 0 calc(14 * var(--u)) rgba(155,194,107,.6); }
#app.sa .care-list li.done .box::after { content: ''; width: 40%; height: 22%; border: 2px solid #0b0c14; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
#app.sa .care-list b { font-weight: 600; font-size: calc(15 * var(--u)); }
#app.sa .care-list p { font-size: calc(13.5 * var(--u)); color: #c9c7da; line-height: 1.5; margin-top: calc(2 * var(--u)); }
#app.sa .care-list li.done b { color: var(--leaf); }
#app.sa .progress { height: calc(4 * var(--u)); border-radius: 4px; background: var(--line); overflow: hidden; margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
#app.sa .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--leaf), #d7f2a8); box-shadow: 0 0 10px var(--leaf); transition: width .5s; }
#app.sa .season { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
#app.sa .season div { border: 1px solid var(--line); border-radius: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.45; color: #c9c7da; }
#app.sa .season b { display: block; color: var(--ochre); font-size: calc(11 * var(--u)); letter-spacing: .14em; text-transform: uppercase; margin-bottom: calc(4 * var(--u)); }
#app.sa .mini-btn { font-size: calc(11 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: calc(4 * var(--u)) calc(10 * var(--u)); }
#app.sa[data-widget="map"] #widget { width: calc(1080 * var(--u)); right: calc(48 * var(--u)); top: calc(118 * var(--u)); max-height: none; }
#app.sa .map-wrap { display: grid; grid-template-columns: 1fr calc(300 * var(--u)); gap: calc(18 * var(--u)); }
#app.sa .tilemap { width: 100%; height: auto; overflow: visible; }
#app.sa .tilemap .t rect { transition: all .4s; }
#app.sa .tilemap text { font-family: var(--mono); pointer-events: none; }
#app.sa .tilemap .t:hover rect { stroke: #fff; stroke-width: 1.5; }
#app.sa .legend { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--muted); margin-top: calc(8 * var(--u)); }
#app.sa .legend i { display: inline-block; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 2px; margin-right: calc(6 * var(--u)); vertical-align: -1px; }
#app.sa .ranks { font-size: calc(12.5 * var(--u)); }
#app.sa .ranks h4 { font-size: calc(11 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
#app.sa .ranks .r { display: grid; grid-template-columns: 1fr auto; gap: calc(8 * var(--u)); align-items: center; padding: calc(3 * var(--u)) 0; }
#app.sa .ranks .r .bar { grid-column: 1 / -1; height: calc(3 * var(--u)); background: var(--line); border-radius: 2px; overflow: hidden; }
#app.sa .ranks .r .bar i { display: block; height: 100%; border-radius: 2px; }
#app.sa .ranks .r b { font-family: var(--mono); font-weight: 500; }
#app.sa .map-tip { position: absolute; pointer-events: none; background: #0b0c18; border: 1px solid var(--line2); border-radius: 8px; padding: calc(8 * var(--u)) calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); opacity: 0; transition: opacity .2s; z-index: 9; white-space: nowrap; }
#app.sa .small { font-size: calc(11.5 * var(--u)); color: var(--dim); line-height: 1.5; margin-top: calc(10 * var(--u)); }
#app.sa[data-widget="visitors"] #widget { left: calc(640 * var(--u)); right: calc(48 * var(--u)); top: auto; bottom: calc(118 * var(--u)); width: auto; }
#app.sa .vis-track { position: relative; display: flex; gap: calc(12 * var(--u)); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
#app.sa .vis-viewport { overflow: hidden; padding: calc(18 * var(--u)) calc(6 * var(--u)); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
#app.sa .vcard { flex: 0 0 calc(250 * var(--u)); min-height: calc(210 * var(--u)); border-radius: calc(14 * var(--u)); padding: calc(16 * var(--u)); background: rgba(6,8,16,.72); border: 1px solid var(--line); transition: all .5s; opacity: .55; transform: scale(.94); position: relative; overflow: hidden; }
#app.sa .vcard::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(closest-side, hsla(var(--h), 95%, 62%, .32), transparent 70%); opacity: 0; transition: opacity .6s; }
#app.sa .vcard.on { opacity: 1; transform: scale(1); border-color: hsla(var(--h), 95%, 66%, .8); box-shadow: 0 0 calc(34 * var(--u)) hsla(var(--h), 95%, 60%, .45), inset 0 0 calc(24 * var(--u)) hsla(var(--h), 95%, 60%, .18); }
#app.sa .vcard.on::before { opacity: 1; }
#app.sa .vcard > * { position: relative; }
#app.sa .vcard .role { color: hsl(var(--h), 90%, 72%); }
#app.sa .vcard h4 { font-family: var(--serif); font-weight: 500; font-size: calc(23 * var(--u)); margin: calc(10 * var(--u)) 0 calc(2 * var(--u)); }
#app.sa .vcard em { display: block; font-size: calc(11.5 * var(--u)); color: var(--muted); font-style: italic; margin-bottom: calc(8 * var(--u)); }
#app.sa .vcard p { font-size: calc(12.5 * var(--u)); line-height: 1.45; color: #cfcde0; }
#app.sa .vcard .ev { margin-top: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--dim); display: flex; justify-content: space-between; gap: 8px; }
#app.sa .vcard .ev b { color: hsl(var(--h), 80%, 70%); font-weight: 500; }
#app.sa .vcard .d3 { position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u)); font-family: var(--mono); font-size: calc(10 * var(--u)); color: #0b0c18; background: hsl(var(--h), 90%, 70%); padding: 2px 6px; border-radius: 3px; }
#app.sa .lum-slider { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(4 * var(--u)); }
#app.sa .lum-slider span { font-size: calc(11 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
#app.sa .lum-slider input { flex: 1; -webkit-appearance: none; appearance: none; height: calc(6 * var(--u)); border-radius: 6px; outline: none;
  background: linear-gradient(90deg, hsl(48,95%,60%), hsl(30,95%,60%), hsl(28,95%,60%), hsl(150,95%,60%), hsl(22,95%,60%), hsl(330,95%,65%), hsl(190,95%,60%), hsl(95,95%,60%), hsl(0,95%,62%));
  box-shadow: 0 0 calc(16 * var(--u)) rgba(143,130,255,.35); }
#app.sa .lum-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, hsl(var(--h,260), 95%, 66%) 60%, transparent 72%); box-shadow: 0 0 calc(24 * var(--u)) calc(6 * var(--u)) hsla(var(--h,260), 95%, 60%, .85), 0 0 calc(70 * var(--u)) calc(14 * var(--u)) hsla(var(--h,260), 95%, 60%, .45); cursor: grab; }
#app.sa .globi { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(18 * var(--u)); align-items: center; font-size: calc(11.5 * var(--u)); color: var(--muted); margin-bottom: calc(4 * var(--u)); }
#app.sa .globi .seg { flex: 1 1 60%; display: flex; height: calc(8 * var(--u)); border-radius: 4px; overflow: hidden; }
#app.sa .globi .seg i { display: block; height: 100%; }
#app.sa .seed-stage { width: 100%; height: auto; display: block; }
#app.sa .steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
#app.sa .steps button { text-align: left; padding: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid var(--line); font-size: calc(11 * var(--u)); color: var(--muted); transition: all .3s; }
#app.sa .steps button b { display: block; font-family: var(--mono); font-size: calc(10 * var(--u)); color: var(--dim); }
#app.sa .steps button.on { border-color: var(--ochre); color: var(--ink); background: rgba(217,164,65,.1); }
#app.sa .step-text { font-size: calc(14 * var(--u)); line-height: 1.55; color: #dedbe9; min-height: calc(46 * var(--u)); margin-top: calc(10 * var(--u)); }
#app.sa .step-text b { color: var(--ochre); }
#app.sa .karyo { display: flex; gap: calc(10 * var(--u)); align-items: flex-end; height: calc(110 * var(--u)); padding: calc(6 * var(--u)) 0; }
#app.sa .karyo .pair { display: flex; gap: calc(3 * var(--u)); align-items: flex-end; flex-direction: column; }
#app.sa .karyo .pair div { display: flex; gap: calc(3 * var(--u)); align-items: flex-end; }
#app.sa .karyo .pair span { font-family: var(--mono); font-size: calc(9.5 * var(--u)); color: var(--dim); align-self: center; }
#app.sa .chrom { width: calc(11 * var(--u)); border-radius: calc(6 * var(--u)); background: linear-gradient(180deg, #b7afff, #6c5ee6); position: relative; box-shadow: 0 0 10px rgba(143,130,255,.35); animation: chrom 3s ease-in-out infinite; }
#app.sa .chrom::after { content: ''; position: absolute; left: -1px; right: -1px; top: var(--c, 40%); height: calc(3 * var(--u)); background: #0b0c18; border-radius: 2px; }
#app.sa @keyframes chrom { 50% { filter: brightness(1.25); }
#app.sa }
.gene-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: calc(14 * var(--u)); }
#app.sa .mol { width: 100%; height: auto; }
#app.sa .pheno { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
#app.sa .pheno div { display: grid; grid-template-columns: calc(26 * var(--u)) calc(118 * var(--u)) 1fr; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: #cfcde0; }
#app.sa .pheno i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 1px var(--line2); }
#app.sa .pheno b { font-weight: 600; color: var(--ink); }
#app.sa .tree { list-style: none; position: relative; }
#app.sa .tree li { position: relative; padding: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(34 * var(--u)); }
#app.sa .tree li::before { content: ''; position: absolute; left: calc(9 * var(--u)); top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .35; }
#app.sa .tree li::after { content: ''; position: absolute; left: calc(4 * var(--u)); top: calc(17 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; border: 1px solid currentColor; background: var(--node, transparent); }
#app.sa .tree li:last-child::after { --node: currentColor; }
#app.sa .tree b { font-family: var(--serif); font-size: calc(22 * var(--u)); font-weight: 500; font-style: italic; }
#app.sa .tree span { margin-left: calc(10 * var(--u)); font-size: calc(12 * var(--u)); opacity: .75; }
#app.sa .kv .tag { align-self: start; }
#app.sa .kv { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.45; }
#app.sa .kv b { font-style: italic; font-family: var(--serif); font-size: calc(17 * var(--u)); font-weight: 500; }
#app.sa .ba { position: relative; width: 100%; aspect-ratio: 900 / 990; border-radius: calc(10 * var(--u)); overflow: hidden; user-select: none; }
#app.sa .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#app.sa .ba .after { clip-path: inset(0 0 0 var(--x, 50%)); }
#app.sa .ba .handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
#app.sa .ba .handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #0b0c18; border: 1px solid var(--amber); display: grid; place-items: center; font-size: calc(16 * var(--u)); color: var(--amber); }
#app.sa .ba label { position: absolute; top: calc(12 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .18em; text-transform: uppercase; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 3px; }
#app.sa .ba .l1 { left: calc(12 * var(--u)); }
#app.sa .ba .l2 { right: calc(12 * var(--u)); color: var(--amber); }
#app.sa[data-widget="model"] #widget { width: calc(470 * var(--u)); }
#app.sa .toggle { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); flex-wrap: wrap; }
#app.sa .toggle button { font-size: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); }
#app.sa .toggle button.on { color: #0b0c18; background: var(--amber); border-color: var(--amber); }
#app.sa .wheel-card { display: grid; grid-template-columns: calc(250 * var(--u)) 1fr; gap: calc(18 * var(--u)); align-items: center; }
#app.sa .swatches { display: grid; gap: calc(8 * var(--u)); }
#app.sa .swatches div { display: grid; grid-template-columns: calc(34 * var(--u)) 1fr auto; gap: calc(10 * var(--u)); align-items: center; font-size: calc(12.5 * var(--u)); }
#app.sa .swatches i { height: calc(34 * var(--u)); border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 1px var(--line2); }
#app.sa .swatches code { font-family: var(--mono); font-size: calc(11 * var(--u)); color: var(--muted); }
#app.sa #color-float { position: absolute; right: calc(56 * var(--u)); bottom: calc(118 * var(--u)); width: calc(560 * var(--u)); z-index: 5; opacity: 0; pointer-events: none; transition: opacity .6s; }
#app.sa[data-lens="color"][data-widget=""] #color-float { opacity: 1; pointer-events: auto; }
#app.sa[data-widget="sources"] #widget { width: calc(1180 * var(--u)); top: calc(140 * var(--u)); max-height: calc(800 * var(--u)); overflow: auto; }
#app.sa[data-widget="sources"] #panel { width: calc(520 * var(--u)); }
#app.sa .refs { list-style: none; counter-reset: r; columns: 2; column-gap: calc(28 * var(--u)); }
#app.sa .refs li { counter-increment: r; break-inside: avoid; font-size: calc(12.2 * var(--u)); line-height: 1.5; color: #cfcde0; padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(34 * var(--u)); position: relative; }
#app.sa .refs li::before { content: '[' counter(r) ']'; position: absolute; left: 0; font-family: var(--mono); color: var(--violet); font-size: calc(11 * var(--u)); }
#app.sa .refs a { color: var(--violet); word-break: break-all; }
#app.sa #dock { left: 50%; transform: translateX(-50%); bottom: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)); border: 1px solid var(--line); border-radius: 999px; background: rgba(8,8,16,.6); backdrop-filter: blur(12px); }
#app.sa #dock ol { display: flex; list-style: none; gap: calc(2 * var(--u)); }
#app.sa #dock li button { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: 999px; font-size: calc(12.5 * var(--u)); color: var(--muted); white-space: nowrap; transition: all .3s; }
#app.sa #dock li button b { font-family: var(--mono); font-weight: 400; font-size: calc(10.5 * var(--u)); color: var(--dim); }
#app.sa #dock li button.on { background: rgba(143,130,255,.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(143,130,255,.5); }
#app.sa #dock li button.on b { color: var(--violet); }
#app.sa #dock .arrow { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
#app.sa #dock .arrow svg { width: 60%; }
#app.sa #hint { left: calc(64 * var(--u)); bottom: calc(36 * var(--u)); font-size: calc(11 * var(--u)); color: var(--dim); letter-spacing: .04em; max-width: calc(300 * var(--u)); }
#app.sa #loader { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: calc(16 * var(--u)); background: #06070d; transition: opacity 1s; }
#app.sa #loader.gone { opacity: 0; pointer-events: none; }
#app.sa #loader .ring { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; border: 2px solid rgba(143,130,255,.2); border-top-color: var(--violet); animation: spin 1s linear infinite; box-shadow: 0 0 30px rgba(143,130,255,.3); }
#app.sa #loader p { font-family: var(--serif); font-style: italic; font-size: calc(22 * var(--u)); color: var(--muted); }
#app.sa #loader .bar { width: calc(240 * var(--u)); height: 2px; background: var(--line); }
#app.sa #loader .bar i { display: block; height: 100%; width: 0; background: var(--violet); transition: width .2s; }
#app.sa @keyframes spin { to { transform: rotate(360deg); }
#app.sa }


#davinci { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1s; z-index: 2; }
#app.sa[data-lens="davinci"] #davinci { opacity: 1; }
#app.sa[data-lens="davinci"] #backdrop { background: radial-gradient(120% 100% at 55% 45%, #efe3c6 0%, #e2d2ad 55%, #c9b287 100%); }
#app.sa[data-lens="davinci"] .vignette { background: radial-gradient(120% 100% at 55% 45%, transparent 50%, rgba(90,55,20,.45) 100%); }
#app.sa[data-lens="davinci"] .grain { opacity: .14; mix-blend-mode: multiply; }
#app.sa[data-lens="davinci"] { --ink: #2e2014; --muted: #6b5238; --dim: #8b7253; --line: rgba(60,38,18,.18); --line2: rgba(60,38,18,.35); --glass: rgba(244,234,210,.72); --violet: #8a3b1e; --ochre: #8a3b1e; --leaf: #5b6b2c; }
#app.sa[data-lens="davinci"] .lead, #app.sa[data-lens="davinci"] .card p, #app.sa[data-lens="davinci"] .care-list p, #app.sa[data-lens="davinci"] .refs li, #app.sa[data-lens="davinci"] .pheno div, #app.sa[data-lens="davinci"] .season div, #app.sa[data-lens="davinci"] .step-text { color: #3d2b19; }
#app.sa[data-lens="davinci"] .fact { background: rgba(247,238,216,.8); }
#app.sa[data-lens="davinci"] #title, #app.sa[data-lens="davinci"] .card h3 { font-style: italic; }
#app.sa[data-lens="davinci"] .lenses, #app.sa[data-lens="davinci"] #dock { background: rgba(244,234,210,.7); }
#app.sa[data-lens="davinci"] .lenses button.on, #app.sa[data-lens="davinci"] #dock li button.on { background: rgba(138,59,30,.14); box-shadow: inset 0 0 0 1px rgba(138,59,30,.5); }
#app.sa[data-lens="davinci"] .vcard { background: rgba(244,234,210,.85); }
#app.sa[data-lens="glow"] #backdrop { background: radial-gradient(110% 90% at 60% 40%, #0b1024 0%, #04050c 60%, #010103 100%); }
#app.sa[data-lens="impression"] #backdrop { background: linear-gradient(170deg, #f2d9a0 0%, #c9b58c 32%, #7e8fb8 70%, #3b4a7a 100%); }
#app.sa[data-lens="impression"] .vignette { background: radial-gradient(120% 100% at 60% 45%, transparent 45%, rgba(30,30,70,.55) 100%); }
#app.sa[data-lens="impression"] #panel, #app.sa[data-lens="impression"] #widget > .card { text-shadow: none; }
#app.sa[data-lens="impression"] #panel { background: rgba(10,12,28,.55); padding: calc(26 * var(--u)); border-radius: calc(16 * var(--u)); backdrop-filter: blur(10px); margin: calc(-26 * var(--u)); }
#app.sa[data-lens="xray"] #backdrop { background: radial-gradient(110% 90% at 60% 40%, #06202a 0%, #03080d 60%, #000 100%); }
#app.sa[data-lens="xray"] { --violet: #6fe3ff; }
#app.sa[data-lens="color"] #backdrop { background: radial-gradient(120% 90% at 60% 40%, #1d1a2e 0%, #0e0d17 60%, #050509 100%); }
#app.sa.hide-ui .chrome { opacity: 0; pointer-events: none; }
#app.sa[data-lens="impression"] .top { background: linear-gradient(180deg, rgba(20,22,48,.62), rgba(20,22,48,0)); }
#app.sa[data-lens="impression"] #hint, #app.sa[data-lens="impression"] #dock { background: rgba(10,12,28,.6); }
#app.sa[data-lens="impression"] #hint { color: #cfd0e8; padding: 6px 10px; border-radius: 6px; }
#app.sa .globi > span:last-child { flex: 1 0 100%; }

/* ================================================================ integración en salvaplantas.com */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../../fonts/cormorant-latin.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../../../fonts/cormorant-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../../../fonts/inter-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../fonts/jetbrains-mono-latin.woff2) format('woff2'); }

#app.sa { position: absolute; inset: 0; overflow: hidden; isolation: isolate; font-family: var(--sans); line-height: normal; text-align: left; }
#app.sa:fullscreen { width: 100vw; height: 100vh; }
#app.sa #sheet { display: contents; }
#app.sa h2#title { font-family: var(--serif); font-weight: 500; font-size: calc(76 * var(--u)); line-height: 1.0; margin: calc(18 * var(--u)) 0 calc(20 * var(--u)); letter-spacing: -.005em; }
#app.sa[data-ch="intro"] h2#title { font-style: italic; font-size: calc(92 * var(--u)); }
#app.sa .brand { cursor: default; }
#app.sa .map-wrap { grid-template-columns: auto 1fr; }
#app.sa .map-svg { position: relative; }
#app.sa .tilemap { height: calc(760 * var(--u)); width: auto; }
#app.sa .seed-ring { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(18 * var(--u)); align-items: center; }
#app.sa .wheel { position: relative; width: calc(250 * var(--u)); height: calc(250 * var(--u)); }
#app.sa .wheel-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(hsl(0,85%,55%),hsl(60,85%,55%),hsl(120,85%,45%),hsl(180,85%,45%),hsl(240,85%,60%),hsl(300,85%,55%),hsl(360,85%,55%));
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
#app.sa :focus-visible { outline: 2px solid #56e8ff; outline-offset: 2px; }

/* póster e inicio antes de montar (lo pinta el servidor: sirve sin JS y como imagen LCP) */
#app.sa .sa-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: opacity 1.2s ease; z-index: 0; }
#app.sa.listo .sa-poster, #app.sa.listo .sa-arrancar, #app.sa.listo .sa-intro { opacity: 0; pointer-events: none; }
#app.sa .sa-intro { position: absolute; left: clamp(16px, 5vw, 64px); bottom: clamp(88px, 14vh, 150px); max-width: 34rem; z-index: 3; transition: opacity .8s; }
#app.sa .sa-intro p { color: #d6d4e6; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; margin: 0; }
#app.sa .sa-intro .kick { font: 600 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #46f5d2; margin-bottom: 10px; text-shadow: 0 0 10px rgba(70,245,210,.4); }
#app.sa .sa-intro .sa-nombre { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 92px); line-height: 1; font-style: italic; margin: 0 0 16px; color: #f4efe6; }
#app.sa .sa-arrancar { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font: 600 15px var(--sans); transition: background .3s, box-shadow .3s, opacity .6s; }
#app.sa.cargando .sa-arrancar { opacity: .6; pointer-events: none; }
#app.sa #loader { z-index: 20; background: radial-gradient(ellipse at 60% 50%, rgba(6,7,13,.25), rgba(6,7,13,.7)); }
#app.sa #loader p { color: #eceaf6; text-shadow: 0 2px 12px #000; }
#app.sa:not(.montado) #loader { display: none; }

/* ================================================================ luz de interacción: rojo encima, verde activo */
#app.sa .lenses button, #app.sa #dock li button, #app.sa .toggle button, #app.sa .steps button, #app.sa .mini-btn, #app.sa .lang button, #app.sa .icon-btn { transition: color .3s, box-shadow .3s, background .3s, border-color .3s, text-shadow .3s; }
#app.sa .lenses button:hover, #app.sa #dock li button:hover, #app.sa .toggle button:hover, #app.sa .steps button:hover, #app.sa .mini-btn:hover, #app.sa .lang button:hover, #app.sa #dock .arrow:hover { color: #ff4d64; text-shadow: 0 0 10px rgba(255,36,71,.55); }
#app.sa .icon-btn:hover { color: #ff4d64; border-color: rgba(255,36,71,.7); box-shadow: 0 0 12px rgba(255,36,71,.4); }
#app.sa .lenses button.on, #app.sa #dock li button.on { background: rgba(70,245,210,.09); color: #eafff8; box-shadow: inset 0 0 0 1px rgba(70,245,210,.55), 0 0 14px rgba(70,245,210,.22); text-shadow: none; }
#app.sa #dock li button.on b, #app.sa .kicker .num { color: #46f5d2; }
#app.sa .kicker { color: #46f5d2; }
#app.sa .kicker .num { border-color: rgba(70,245,210,.5); box-shadow: 0 0 10px rgba(70,245,210,.2); }
#app.sa .toggle button.on, #app.sa .steps button.on { color: #eafff8; background: rgba(70,245,210,.1); border-color: rgba(70,245,210,.6); box-shadow: 0 0 12px rgba(70,245,210,.25); }
#app.sa .lang button.on { text-decoration-color: #46f5d2; }
#app.sa .sa-arrancar { color: #f4efe6; background: rgba(255,36,71,.14); border: 1px solid #ff2447; box-shadow: 0 0 22px rgba(255,36,71,.4); }
#app.sa .sa-arrancar:hover { background: rgba(255,36,71,.24); box-shadow: 0 0 32px rgba(255,36,71,.55); }
#app.sa[data-lens="davinci"] .kicker { color: #8a3b1e; }

/* ================================================================ Sol */
#app.sa .sun-top { display: grid; grid-template-columns: 1fr 1.2fr; gap: calc(18 * var(--u)); align-items: end; }
#app.sa .sun-lbl { display: block; font-size: calc(10.5 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
#app.sa #sun-clock { font-family: var(--serif); font-weight: 500; font-size: calc(58 * var(--u)); line-height: 1; color: #ffd27a; text-shadow: 0 0 calc(24 * var(--u)) rgba(255,190,90,.55); font-variant-numeric: lining-nums tabular-nums; }
#app.sa #sun-state { font-style: normal; margin-left: calc(10 * var(--u)); font-size: calc(26 * var(--u)); color: #ffd27a; }
#app.sa .sun-sum b { font-family: var(--serif); font-weight: 500; font-size: calc(40 * var(--u)); line-height: 1.05; display: block; }
#app.sa .sun-sum small { font-size: calc(11.5 * var(--u)); color: var(--muted); }
#app.sa #sun-verdict { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
#app.sa #sun-verdict.ok { color: #6ff2c0; } #app.sa #sun-verdict.low { color: #ff7a63; }
#app.sa .sun-hours { display: grid; grid-template-columns: repeat(14, 1fr); gap: calc(3 * var(--u)); margin: calc(18 * var(--u)) 0 calc(22 * var(--u)); }
#app.sa .sun-hours i { position: relative; height: calc(28 * var(--u)); border-radius: calc(5 * var(--u)); background: rgba(255,255,255,.06); transition: background .5s, box-shadow .5s; }
#app.sa .sun-hours i span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); font: calc(9.5 * var(--u)) var(--mono); color: var(--dim); }
#app.sa .sun-hours i.lit { background: linear-gradient(180deg, #ffe08a, #ff9f43); box-shadow: 0 0 calc(12 * var(--u)) rgba(255,180,80,.5); }
#app.sa .sun-hours i.now { outline: 2px solid #fff; outline-offset: 1px; }
#app.sa .sun-axis { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#app.sa .sun-axis input { flex: 1; -webkit-appearance: none; appearance: none; height: calc(6 * var(--u)); border-radius: 6px; outline: none;
  background: linear-gradient(90deg, #241a78, #ff7a63 12%, #ffe08a 50%, #ff7a63 88%, #241a78); box-shadow: 0 0 calc(14 * var(--u)) rgba(255,180,90,.35); }
#app.sa .sun-axis input::-webkit-slider-thumb { -webkit-appearance: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #ffd27a 62%, transparent 72%); box-shadow: 0 0 calc(20 * var(--u)) calc(4 * var(--u)) rgba(255,200,110,.8); cursor: grab; }
#app.sa .sun-axis input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 16px rgba(255,200,110,.8); }

/* ================================================================ Agua */
#app.sa .water-steps { list-style: none; display: grid; gap: calc(4 * var(--u)); }
#app.sa .water-steps li { display: grid; grid-template-columns: calc(34 * var(--u)) 1fr; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid transparent; opacity: .45; transition: all .5s; }
#app.sa .water-steps li b { font: calc(11 * var(--u)) var(--mono); color: var(--dim); padding-top: calc(3 * var(--u)); }
#app.sa .water-steps li strong { font-family: var(--serif); font-weight: 500; font-size: calc(21 * var(--u)); }
#app.sa .water-steps li p { font-size: calc(13 * var(--u)); color: #c9c7da; line-height: 1.45; }
#app.sa .water-steps li.on { opacity: 1; border-color: rgba(86,232,255,.45); background: rgba(47,123,255,.12); box-shadow: 0 0 calc(24 * var(--u)) rgba(86,232,255,.18); }
#app.sa .water-steps li.on b { color: #56e8ff; }
#app.sa .water-gauge { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#app.sa .water-gauge b { font-family: var(--mono); font-weight: 500; color: #56e8ff; letter-spacing: 0; }
#app.sa .water-gauge .progress { grid-column: 1 / -1; height: calc(8 * var(--u)); }
#app.sa .water-gauge .progress i { background: linear-gradient(90deg, #1537b8, #2f7bff, #56e8ff); box-shadow: 0 0 12px rgba(86,232,255,.6); transition: width .2s linear; }
#app.sa .water-soggy-note { margin-top: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.5; color: #ffc9a8; padding-left: calc(12 * var(--u)); border-left: 2px solid #ff7a63; }

/* ================================================================ teléfono y tableta vertical (data-m="1") */
#app.sa[data-m="1"] .top { height: calc(54 * var(--u)); padding: 0 calc(14 * var(--u)); gap: calc(8 * var(--u)); }
#app.sa[data-m="1"] .brand b { font-size: calc(21 * var(--u)); }
#app.sa[data-m="1"] .brand small { display: none; }
#app.sa[data-m="1"] .brand svg { width: calc(20 * var(--u)); height: calc(26 * var(--u)); }
#app.sa[data-m="1"] .top-right { gap: calc(10 * var(--u)); }
#app.sa[data-m="1"] .lenses { position: absolute; top: calc(54 * var(--u)); left: 0; right: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; padding: 0 calc(10 * var(--u)); overflow-x: auto; scrollbar-width: none; }
#app.sa[data-m="1"] .lenses::-webkit-scrollbar { display: none; }
#app.sa[data-m="1"] .lenses button { flex: 0 0 auto; font-size: calc(12.5 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); background: rgba(8,8,16,.55); backdrop-filter: blur(8px); }
#app.sa[data-m="1"] .lenses button kbd { display: none; }
#app.sa[data-m="1"] .lang { font-size: calc(12.5 * var(--u)); }
#app.sa[data-m="1"] .icon-btn { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
#app.sa[data-m="1"] #sheet { display: block; position: absolute; left: 0; right: 0; top: 50%; bottom: calc(56 * var(--u)); z-index: 5; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u));
  background: linear-gradient(180deg, rgba(6,7,13,0) 0, rgba(6,7,13,.82) calc(40 * var(--u)), rgba(6,7,13,.94) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(22 * var(--u))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(22 * var(--u))); }
#app.sa[data-m="1"] #panel, #app.sa[data-m="1"][data-widget] #widget { position: static; width: auto; max-height: none; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin: 0; }
#app.sa[data-m="1"] #widget:not(:empty) { margin-top: calc(18 * var(--u)); }
#app.sa[data-m="1"] h2#title { font-size: calc(40 * var(--u)); margin: calc(12 * var(--u)) 0 calc(12 * var(--u)); }
#app.sa[data-m="1"][data-ch="intro"] h2#title { font-size: calc(46 * var(--u)); }
#app.sa[data-m="1"] .lead { font-size: calc(15.5 * var(--u)); }
#app.sa[data-m="1"] .kicker { font-size: calc(11 * var(--u)); }
#app.sa[data-m="1"] .fact b { font-size: calc(19 * var(--u)); }
#app.sa[data-m="1"] .note { font-size: calc(13 * var(--u)); }
#app.sa[data-m="1"][data-lens="impression"] #panel { margin: 0; padding: calc(16 * var(--u)); }
#app.sa[data-m="1"] .card { padding: calc(16 * var(--u)); }
#app.sa[data-m="1"] .map-wrap { grid-template-columns: 1fr; }
#app.sa[data-m="1"] .tilemap { width: 100%; height: auto; }
#app.sa[data-m="1"] .refs { columns: 1; }
#app.sa[data-m="1"] .refs li { font-size: calc(12.5 * var(--u)); }
#app.sa[data-m="1"] .gene-grid { grid-template-columns: 1fr; }
#app.sa[data-m="1"] .steps { grid-template-columns: repeat(3, 1fr); }
#app.sa[data-m="1"] .vcard { flex-basis: calc(240 * var(--u)); }
#app.sa[data-m="1"] .wheel-card { grid-template-columns: 1fr; }
#app.sa[data-m="1"] .sun-top { grid-template-columns: 1fr; }
#app.sa[data-m="1"] #dock { left: 0; right: 0; bottom: 0; transform: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); padding: calc(6 * var(--u)) calc(8 * var(--u)); overflow-x: auto; scrollbar-width: none; background: rgba(6,7,13,.92); }
#app.sa[data-m="1"] #dock::-webkit-scrollbar { display: none; }
#app.sa[data-m="1"] #dock .arrow { display: none; }
#app.sa[data-m="1"] #dock li button { font-size: calc(13 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); }
#app.sa[data-m="1"] #hint, #app.sa[data-m="1"] #color-float { display: none; }
#app.sa[data-m="1"] .sa-intro { bottom: 96px; right: 16px; }
@media (prefers-reduced-motion: reduce) { #app.sa .grain { animation: none; } }