@property --amb-a { syntax:'<color>'; inherits:true; initial-value:#14A44D; }
@property --amb-b { syntax:'<color>'; inherits:true; initial-value:#00BFA6; }

.ej-slide[data-caso="vivero"]  { --case-a:#14A44D; --case-b:#00BFA6; --case-ink:#0B7A38; }
.ej-slide[data-caso="insumos"] { --case-a:#015F83; --case-b:#3F8AA8; --case-ink:#015F83; }
html[data-theme="dark"] .ej-slide[data-caso="vivero"]  { --case-ink:#4FD487; }
html[data-theme="dark"] .ej-slide[data-caso="insumos"] { --case-a:#2A8DB5; --case-b:#5FB0D0; --case-ink:#6EC2E4; }

#ejemplo{ --amb-a:#14A44D; --amb-b:#00BFA6; transition:--amb-a .9s ease, --amb-b .9s ease; }
#ejemplo > .wrap{ position:relative; z-index:1; }
.ej-ambient{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  border-radius:inherit;
  background:
    radial-gradient(42% 52% at 76% 62%, color-mix(in srgb, var(--amb-a) 15%, transparent), transparent 72%),
    radial-gradient(30% 40% at 92% 22%, color-mix(in srgb, var(--amb-b) 12%, transparent), transparent 70%),
    radial-gradient(34% 44% at 6% 92%, color-mix(in srgb, var(--amb-b) 8%, transparent), transparent 70%);
}
html[data-theme="dark"] .ej-ambient{
  background:
    radial-gradient(42% 52% at 76% 62%, color-mix(in srgb, var(--amb-a) 24%, transparent), transparent 72%),
    radial-gradient(30% 40% at 92% 22%, color-mix(in srgb, var(--amb-b) 16%, transparent), transparent 70%),
    radial-gradient(34% 44% at 6% 92%, color-mix(in srgb, var(--amb-b) 10%, transparent), transparent 70%);
}

.ej-slide .ejemplo-list li svg{ color:var(--case-ink); }

#ejemplo .pd-card{
  background:none; border-color:transparent; box-shadow:none; overflow:visible;
}
#ejemplo .pd-blob,
#ejemplo .pd-blob.kr-blob{
  inset:6% 4% 10%; border-radius:50%;
  background:
    radial-gradient(closest-side at 40% 40%, color-mix(in srgb, var(--case-a) 42%, transparent), transparent),
    radial-gradient(closest-side at 65% 65%, color-mix(in srgb, var(--case-b) 36%, transparent), transparent);
  filter:blur(38px); opacity:.75;
}
html[data-theme="dark"] #ejemplo .pd-blob{ opacity:.6; }

.pd-phone-wrap{
  --rx:0deg; --ry:0deg;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.pd-phone-wrap::after{
  content:''; position:absolute; left:50%; bottom:-34px; width:220px; height:36px; margin-left:-110px;
  border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--case-a) 45%, rgba(0,0,0,.35)), transparent);
  filter:blur(10px); opacity:.55;
}

.ej-toasts{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.ej-toast{
  position:absolute;
  opacity:0; transform:translateY(10px) scale(.92); filter:blur(4px);
  transition:opacity .35s ease, transform .4s ease, filter .35s ease;
}
.ej-toast.t1{ left:-14px; top:20%; }
.ej-toast.t2{ right:-18px; top:47%; }
.ej-toast.t3{ left:-6px; bottom:13%; }
.ej-toast.is-on,
.ej-toasts.is-static .ej-toast{
  opacity:1; transform:none; filter:none;
  transition:opacity .4s ease, transform .6s cubic-bezier(.2,.9,.25,1.25), filter .4s ease;
}
.ej-toast-in{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 10px; border-radius:16px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.35), 0 2px 6px -2px rgba(0,0,0,.08);
  white-space:nowrap;
}
html[data-theme="dark"] .ej-toast-in{ box-shadow:0 18px 36px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
.ej-toast-ic{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--case-ink);
  background:color-mix(in srgb, var(--case-a) 14%, transparent);
}
.ej-toast-ic svg{ width:17px; height:17px; }
.ej-toast-tx{ display:flex; flex-direction:column; line-height:1.2; }
.ej-toast-tx b{ font-size:13px; font-weight:700; color:var(--text); }
.ej-toast-tx small{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.ej-toast-time{
  align-self:flex-start; margin-left:6px; padding-top:1px;
  font-style:normal; font-size:10.5px; font-weight:600; color:var(--text-muted, var(--text-dim)); opacity:.8;
}

@media (prefers-reduced-motion:no-preference){
  .ej-toast.is-on .ej-toast-in{ animation:ejFloat 6s ease-in-out infinite; animation-delay:calc(var(--i) * -2s); }
  .ej-toast.is-on .ej-toast-ic{ animation:ejPing .9s ease-out .15s 1 both; }
}
@keyframes ejPing{
  0%  { box-shadow:0 0 0 0 color-mix(in srgb, var(--case-a) 45%, transparent); }
  100%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--case-a) 0%, transparent); }
}
@keyframes ejFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

@media (max-width:900px){
  .ej-toast,
  .ej-toast.t1, .ej-toast.t2, .ej-toast.t3{
    left:50%; right:auto; bottom:auto; top:52px;
    width:240px; margin-left:-120px;
    transform:translateY(-16px) scale(.96);
  }
  .ej-toast.is-on,
  .ej-toasts.is-static .ej-toast{ transform:none; }
  .ej-toasts.is-static .ej-toast.t2{ top:120px; }
  .ej-toasts.is-static .ej-toast.t3{ top:188px; }

  .ej-toast-in{
    padding:9px 11px 9px 9px; gap:9px; border-radius:18px; white-space:normal;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow:0 14px 30px -14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.08);
  }
  .ej-toast-ic{ width:30px; height:30px; border-radius:9px; }
  .ej-toast-ic svg{ width:16px; height:16px; }
  .ej-toast-tx{ flex:1; min-width:0; }
  .ej-toast-tx b{ font-size:12.5px; }
  .ej-toast-tx small{ font-size:11px; }
  @media (prefers-reduced-motion:no-preference){
    .ej-toast.is-on .ej-toast-in{ animation:none; }
  }
}

.ej-ficha{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ej-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 10px; border-radius:999px;
  font-size:13px; font-weight:600; line-height:1;
  color:var(--case-ink);
  background:color-mix(in srgb, var(--case-a) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--case-a) 24%, transparent);
}
.ej-chip svg{ width:14px; height:14px; flex-shrink:0; }