/* =====================================================================
   v18 · Caso real destacado + explorador de paletas
   ===================================================================== */
.case18{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:32px;border-radius:32px;background:#ffffff08;border:1px solid #ffffff1f}
.case-shot{display:block;color:inherit}
.case-shot .browser{box-shadow:0 2px 4px #0003,0 32px 64px #0008}
.case-shot .pc-view{aspect-ratio:16/11}
.case-info{display:flex;flex-direction:column;gap:14px}
.case-info h3{font:800 clamp(30px,2.8vw,40px)/1.1 Outfit,sans-serif;color:#fff}
.case-info>p{font-size:16px;line-height:1.6;color:var(--on-dark-muted);margin:0}
.case-built{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.case-built li{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff}
.case-built li:before{content:'✓';display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700}
.case18 .metrics14{margin:6px 0 0}
.case-link{align-self:flex-start;margin-top:6px;color:var(--lime);font:600 15px Outfit,sans-serif;text-decoration:none;border-bottom:1px solid #c6ff3d66}
.case-link:hover{border-color:var(--lime)}
.next18{display:flex;align-items:center;gap:20px;margin-top:24px;padding:20px 24px;border-radius:24px;border:1.5px dashed #ffffff40}
.next-badge{flex-shrink:0;padding:6px 12px;border-radius:8px;background:var(--lime);color:var(--ink);font:700 12px var(--mono);letter-spacing:.08em}
.next18 p{margin:0;flex:1;font-size:16px;line-height:1.5;color:var(--on-dark-muted)}
.next18 p b{color:#fff}
.next18 .button{flex-shrink:0}

/* Explorador de paletas */
.work13 #estilos.pal18{margin:96px 0 0;padding:64px 0 0;border-top:1px solid #ffffff1f;border-radius:0;background:none;max-width:none;width:auto;position:static}
.pal-chips{margin-bottom:24px}
.pal-chips .chip{background:#ffffff0f;border-color:#ffffff2e;color:#fff}
.pal-chips .chip:hover{border-color:var(--lime);background:#ffffff1a}
.pal-chips .chip[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pal-card{--pbg:#fff;--pfg:#0f2a4a;--pac:#1d6fd8;--psoft:#8fd3f4;--pbtn:#fff;--pff:'Work Sans',sans-serif;display:grid;grid-template-columns:1.2fr .8fr;gap:0;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 2px 4px #0003,0 32px 64px #0007}
.pal-prev{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:56px;min-height:380px;background:var(--pbg);color:var(--pfg);font-family:var(--pff);transition:background .5s,color .5s}
.pp-logo{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font:700 18px var(--pff);letter-spacing:.02em}
.pp-logo:before{content:'';width:26px;height:26px;border-radius:8px;background:var(--pac);transition:background .5s}
.pp-h{font:800 clamp(34px,3.6vw,52px)/1.04 var(--pff);letter-spacing:-.02em;max-width:12ch}
.pp-line{display:block;height:10px;border-radius:6px;width:80%;background:var(--pfg);opacity:.16}.pp-line.short{width:55%}
.pp-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.pp-btn,.pp-btn2{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:99px;font:700 15px var(--pff);transition:background .5s,color .5s,border-color .5s}
.pp-btn{background:var(--pac);color:var(--pbtn)}
.pp-btn2{border:2px solid var(--psoft);color:var(--pfg)}
.pal-info{display:flex;flex-direction:column;gap:12px;padding:40px 36px;color:var(--ink);border-left:1px solid #eee8f6}
.pal-info small{font:700 12px var(--mono);letter-spacing:.12em;color:var(--violeta)}
.pal-info>b{font:800 28px/1.15 Outfit,sans-serif}
.pal-sw{list-style:none;margin:6px 0;padding:0;display:grid;gap:10px}
.pal-sw li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px}
.pal-sw i{width:40px;height:40px;border-radius:12px;border:1px solid #12101f1f;box-shadow:inset 0 0 0 3px #ffffff40}
.pal-sw b{font:600 15px Outfit,sans-serif}
.pal-sw code{font:600 12px var(--mono);color:var(--muted)}
.pal-font{margin:4px 0 0;font-size:15px;color:var(--muted)}.pal-font span{color:var(--ink);font-weight:600}
.pal-k{margin:6px 0 0;font:700 12px var(--mono);letter-spacing:.1em;color:var(--violeta);text-transform:uppercase}
.pal-uses{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pal-uses li{padding:6px 12px;border-radius:99px;background:var(--lavanda);font:600 13px Outfit,sans-serif}
.pal-card.is-swap .pal-sw li,.pal-card.is-swap .pal-uses li{animation:palIn .5s var(--ease-ui) both}
.pal-card.is-swap .pal-sw li:nth-child(2){animation-delay:.06s}.pal-card.is-swap .pal-sw li:nth-child(3){animation-delay:.12s}
.pal-card.is-swap .pp-h{animation:palIn .55s var(--ease-ui) both}
@keyframes palIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pal-card *{animation:none!important}}
@media(max-width:1000px){.case18{grid-template-columns:1fr;gap:32px}.pal-card{grid-template-columns:1fr}.pal-info{border-left:0;border-top:1px solid #eee8f6}}
@media(max-width:760px){.case18{padding:16px;border-radius:24px}.case-built{grid-template-columns:1fr}.next18{flex-direction:column;align-items:flex-start}.pal-prev{padding:32px 24px;min-height:300px}.pal-info{padding:28px 24px}.work13 #estilos.pal18{margin-top:64px;padding-top:48px}}